この記事では、SQLiteのテーブルデータの値をC#のグラフに表示させる方法についてご説明します。
【動画】SQLiteのテーブルデータの値をC#のグラフに表示させる実際の動き
本題に入る前に、まずは次の動画をご覧ください。
SQLiteのデータベースに接続し、テーブル内にあるデータを取得してグラフに表示させます。
SQLiteのデータベースに接続する前準備
C#からSQLiteのデータベースに接続するには、「System.Data.SQLite.Core」と呼ばれるパッケージが必要です。
「System.Data.SQLite.Core」を使うには、「System.Data.SQLite.Core」のインストールが必要なので、お使いの環境で「System.Data.SQLite.Core」がインストールされていない場合は下の内容をご参照ください。
参考 「System.Data.SQLite.Core」のインストールTech-vb.com参照設定が必要
今回のコードを実行するのに参照設定が必要です。
今回は以下の参照設定を行います。
- System.Windows.Forms.DataVisualization(System.Windows.Forms.DataVisualization.dll)
- System.Configuration(System.Configuration.dll)
①System.Windows.Forms.DataVisualization(System.Windows.Forms.DataVisualization.dll)
System.Windows.Forms.DataVisualizationを参照設定すると、グラフの作成や取得したデータのグラフ表示など、グラフに関する様々な操作ができるようになります。
今回はSQLiteのテーブルから表のデータをグラフ表示させるので、この参照設定が必要になります。
②System.Configuration(System.Configuration.dll)
System.Configurationを参照設定すると、アプリケーションの設定をapp.configのような外部の設定ファイルに分けることができ、コンパイルの必要が無く設定値を変更することができるようになります。
System.Configurationを参照設定しないと、「ConfigurationManager」が存在しないとのことでエラーになってしまうので、この参照設定が必要になります。
コードの流れ
インポートする名前空間には、データの取得やグラフ描画などがあります。
SQLiteのテーブルデータとフォームの例
SQLiteのテーブルデータ
今回は下のSQLiteのテーブルデータを用意しました。
「t_item」のテーブルにデータが存在しています。
今回は「在庫」の値をグラフに出力します。
C#のフォーム
今回は下のC#のフォームを用意しました。
フォームにある「グラフの出力」ボタンをクリックすると、下のとおりSQLiteのテーブルデータをグラフ表示します。
C#のコード(例)
App.configのコード
<?xml version="1.0" encoding="utf-8" ?>
<configuration>
<startup>
<supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.7.2" />
</startup>
<appSettings>
<!-- 接続文字列 -->
<add key="DBConnString" value="Data Source={0};Version=3" />
<!-- 接続したいSQLiteのデータベースファイル名 -->
<add key="DBPath" value="C:¥work¥10_勉強¥21_C#¥0073¥0073.db" />
</appSettings>
</configuration>
コードの説明
以上のコードは、SQLiteのデータベースに接続するのに必要な接続文字列を「DBConnString」というキーに設定しているコードです。
10行目は、SQLiteのデータベースに接続するのに必要な接続文字列を「DBConnString」というキーに設定しているコードです。
13行目は、SQLiteのデータベースファイルのフルパスを「DBPath」というキーに設定しているコードです。
この「DBConnString」と「DBPath」のキーの値を、フォーム側のコードが参照して使います。
ちなみに、今回接続しようとしているデータベースファイル「0073.db」は以下のフォルダに格納しています。
フォームのコード
using System;
using System.Configuration;
using System.Data.SQLite;
using System.Windows.Forms;
using System.Windows.Forms.DataVisualization.Charting;
namespace wfcs_0073
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void button1_Click(object sender, EventArgs e)
{
// チャートを初期化するメソッドを呼び出す
Chart chart = InitializeChart();
// SQLiteのテーブルからデータを読み込み、シリーズを作成し、グラフに追加する
SeriesFromSQLite(chart);
}
private Chart InitializeChart()
{
// グラフ用のインスタンスを生成する
Chart chart = new Chart
{
// グラフの縦と横の幅を設定する(横幅・縦幅)
Size = new System.Drawing.Size(900, 400),
// フォーム上に設置するグラフの位置を設定する(横・縦)
Location = new System.Drawing.Point(120, 20)
};
// チャートエリア用のインスタンスを生成する
ChartArea chartArea = new ChartArea();
// グラフにチャートエリアを追加する
chart.ChartAreas.Add(chartArea);
// X軸のラベル間隔を設定する
chartArea.AxisX.LabelStyle.Interval = 1;
// 設定を施したchartオブジェクトを返す
return chart;
}
private void SeriesFromSQLite(Chart chart)
{
// App.configのappSettingsタグ内に記述した「DBConnString」のキーの値を取得して変数「connStrTemplate」に格納する
string connStrTemplate = ConfigurationManager.AppSettings["DBConnString"];
// App.configのappSettingsタグ内に記述した「DBPath」のキーの値を取得して変数「DBPath」に格納する
string DBPath = ConfigurationManager.AppSettings["DBPath"];
// connStrTemplateの{0}の部分を、「DBPath」の値に置き換える
string connectionString = string.Format(connStrTemplate, DBPath);
// SQLiteの「t_item」テーブルからデータを取得するSELECT文を用意する
string query = "SELECT 名前, 在庫 FROM t_item";
// SQLiteConnectionオブジェクトを作成し、接続文字列を使用してデータベースに接続する
using (SQLiteConnection connection = new SQLiteConnection(connectionString))
{
// SELECT文を実行するためのSQLiteCommandインスタンスを生成する
SQLiteCommand command = new SQLiteCommand(query, connection);
// データベース接続を開く
connection.Open();
// SELECT文を実行し、結果をSQLiteDataReaderのインスタンスに格納する
SQLiteDataReader reader = command.ExecuteReader();
// シリーズの名前を用意する
string srsStr = "SeriesTest";
Series series = new Series(srsStr)
{
// シリーズのポイント幅を設定する
["PointWidth"] = "0.5",
// シリーズのチャートタイプを設定
ChartType = SeriesChartType.Column
};
// シリーズをチャートに追加する
chart.Series.Add(series);
// シリーズのポイントをクリアする
chart.Series[srsStr].Points.Clear();
// 取得したデータの最終行まで処理を繰り返すwhileループ
while (reader.Read())
{
// SQLiteのテーブルから取得した「名前」の値を変数nameに格納する
string name = reader["名前"].ToString();
// SQLiteのテーブルから取得した「在庫」の値を変数stockに格納する
int stock = Convert.ToInt32(reader["在庫"]);
// シリーズにデータポイントを追加する
chart.Series[srsStr].Points.AddXY(name, stock);
}
// readerを閉じる
reader.Close();
}
// フォームにチャートを追加する
this.Controls.Add(chart);
}
}
}
注目すべきコード①
最初に見て頂きたいのは1行目から5行目です。
using System; using System.Windows.Forms; using SQLiteConnector; using System.Windows.Forms.DataVisualization.Charting; using System.Configuration;
コードの説明
以上のコードは、必要な名前空間の使用宣言およびエイリアス宣言のコードです。
コードの詳細
1行目は、.NET Frameworkの基本クラスのセットを参照する名前空間です。
2行目は、ウィンドウやダイアログボックスを使う名前空間です。
3行目は、SQLiteへの接続とデータの操作を行うためのクラスです。
4行目は、チャートやグラフを作成し、表示するためのクラスとコントロールを提供する名前空間です。
5行目は、アプリケーションの実行時設定やカスタム設定を読み込み、保存することができる名前空間です。
アプリケーションの設定をapp.configのような外部の設定ファイルに分けることができ、コンパイルの必要が無く設定値を変更することができるようになります。
注目すべきコード②
次に見て頂きたいのは18行目から21行目です。
// チャートを初期化するメソッドを呼び出す
Chart chart = InitializeChart();
// SQLiteのテーブルからデータを読み込み、シリーズを作成し、グラフに追加する
SeriesFromSQLite(chart);
コードの説明
以上のコードは、使用するグラフを初期化するInitializeChartメソッドと、SQLiteのテーブルデータをグラフに出力するメソッドSeriesFromSQLiteを呼び出す処理のコードです。
InitializeChartメソッドが何行目にあるのかというと24行目にあります。
private Chart InitializeChart()
また、SeriesFromSQLiteメソッドが何行目にあるのかというと48行目にあります。
private void SeriesFromSQLite(Chart chart)
SeriesFromSQLiteメソッドを呼び出す際は初期化したグラフ用のインスタンスを引数に渡します。
注目すべきコード③
次に見て頂きたいのは27行目から46行目です。
// グラフ用のインスタンスを生成する
Chart chart = new Chart
{
// グラフの縦と横の幅を設定する(横幅・縦幅)
Size = new System.Drawing.Size(900, 400),
// フォーム上に設置するグラフの位置を設定する(横・縦)
Location = new System.Drawing.Point(120, 20)
};
// チャートエリア用のインスタンスを生成する
ChartArea chartArea = new ChartArea();
// グラフにチャートエリアを追加する
chart.ChartAreas.Add(chartArea);
// X軸のラベル間隔を設定する
chartArea.AxisX.LabelStyle.Interval = 1;
// 設定を施したchartオブジェクトを返す
return chart;
コードの説明
以上のコードは、グラフの各設定を行う処理のコードです。
コードの詳細
27行目のコードでは、グラフ用のインスタンスを生成し、グラフの横幅と縦幅(30行目)、設置する位置(縦・横)(33行目)を設定します。
37行目のコードではチャートエリア用のインスタンスを生成し、40行目でグラフにチャートエリアを追加します。
43行目のコードでは、X軸のラベル間隔を設定します。
1を設定すると、X軸のラベルをすべて表示させます。
46行目のコードでは、各設定したchartオブジェクトを返します。
この処理により、このメソッドを呼び出したところでグラフを使うことができるようになります。
注目すべきコード④
次に見て頂きたいのは48行目から112行目です。
private void SeriesFromSQLite(Chart chart)
{
// App.configのappSettingsタグ内に記述した「DBConnString」のキーの値を取得して変数「connStrTemplate」に格納する
string connStrTemplate = ConfigurationManager.AppSettings["DBConnString"];
// App.configのappSettingsタグ内に記述した「DBPath」のキーの値を取得して変数「DBPath」に格納する
string DBPath = ConfigurationManager.AppSettings["DBPath"];
// connStrTemplateの{0}の部分を、「DBPath」の値に置き換える
string connectionString = string.Format(connStrTemplate, DBPath);
// SQLiteの「t_item」テーブルからデータを取得するSELECT文を用意する
string query = "SELECT 名前, 在庫 FROM t_item";
// SQLiteConnectionオブジェクトを作成し、接続文字列を使用してデータベースに接続する
using (SQLiteConnection connection = new SQLiteConnection(connectionString))
{
// SELECT文を実行するためのSQLiteCommandインスタンスを生成する
SQLiteCommand command = new SQLiteCommand(query, connection);
// データベース接続を開く
connection.Open();
// SELECT文を実行し、結果をSQLiteDataReaderのインスタンスに格納する
SQLiteDataReader reader = command.ExecuteReader();
// シリーズの名前を用意する
string srsStr = "SeriesTest";
Series series = new Series(srsStr)
{
// シリーズのポイント幅を設定する
["PointWidth"] = "0.5",
// シリーズのチャートタイプを設定
ChartType = SeriesChartType.Column
};
// シリーズをチャートに追加する
chart.Series.Add(series);
// シリーズのポイントをクリアする
chart.Series[srsStr].Points.Clear();
// 取得したデータの最終行まで処理を繰り返すwhileループ
while (reader.Read())
{
// SQLiteのテーブルから取得した「名前」の値を変数nameに格納する
string name = reader["名前"].ToString();
// SQLiteのテーブルから取得した「在庫」の値を変数stockに格納する
int stock = Convert.ToInt32(reader["在庫"]);
// シリーズにデータポイントを追加する
chart.Series[srsStr].Points.AddXY(name, stock);
}
// readerを閉じる
reader.Close();
}
// フォームにチャートを追加する
this.Controls.Add(chart);
}
コードの説明
以上のコードは、値をグラフに追加する処理のコードです。
コードの詳細
51行目では、「DBConnString」のキーの値を変数connStrTemplateに格納しています。
54行目では、「DBPath」のキーの値を変数DBPathに格納しています。
57行目のコードは、connStrTemplateの{0}の部分を、「DBPath」の値に置き換えています。
connStrTemplateの{0}の部分を、「DBPath」の値に置き換える、とはどういうことかというと、{0}の部分をSQLiteのデータベースのフルパスに置き換える、ということです。
今回は接続文字列と、SQLiteのデータベース名を分けてそれぞれ「DBConnString」と「DBPath」とキーを分けてあるので、フォームのコード側で接続文字列と、SQLiteのデータベース名を一つの文字列に組み立てています。
参考までに、string.Format実行前と実行後の状態を以下にお見せします。
以上のように、{0}の部分が「C:¥work¥10_勉強¥21_C#¥0073¥0073.db」に置き換わっています。
Data Source={0};Version=3
Data Source=C:¥work¥10_勉強¥21_C#¥0073¥0073.db;Version=3
以上により、SQLiteへの接続文字列が取得できました。
60行目のコードでは、SQLiteの「t_item」テーブルからデータを取得するSELECT文を用意しています。
63行目のコードでは、SQLiteConnectionオブジェクトを作成し、接続文字列を使用してデータベースに接続しています。
66行目のコードでは、SELECT文を実行するためのSQLiteCommandインスタンスを生成しています。
69行目のコードでは、SQLiteのデータベース接続を開いています。
72行目のコードでは、SELECT文を実行し、結果をreaderに格納しています。
75行目のコードは、シリーズ用のインスタンス名に設定する名前を取得するコードです。
77行目のコードでは、シリーズ用のインスタンスを生成します。
80目のコードでは、シリーズのチャートタイプを設定します。
83行目のコードでは、シリーズのポイント幅を設定します。
今回は「Column」(縦の棒グラフ)を指定しています。
87行目のコードでは、シリーズをチャートに追加します。
90行目のコードは、取得したデータの最終行まで処理を繰り返すwhile文です。
今回は10件あるテーブルデータを取得しているので10件目まで処理を繰り返します。
93行目のコードでは、SQLiteのテーブルから取得した「名前」の値を変数nameに格納しています。
96行目のコードでは、SQLiteのテーブルから取得した「在庫」の値を変数stockに格納しています。
なお、Convert.ToInt32メソッドを使って「score」の値をint型に型変換しています。
99行目のコードでは、シリーズにカテゴリ(name)とデータ(stock)を追加します。(カテゴリの数だけ繰り返す)
103行目のコードでは、readerを閉じています。
107行目のコードでは、フォームにチャートを追加します。
動作確認
「SQLiteのテーブルデータとフォームの例」をご覧ください。
最後に
この記事では、SQLiteのテーブルデータの値をC#のグラフに表示させる方法についてご説明しました。
SQLiteのテーブルデータの値をC#のグラフに表示させたい場合は本記事を参考にして頂けたら幸いです。
プログラミングのスキルを習得するなら
プログラミングのスキルを習得したい、今のスキルをもっと高めたい、そう考えているなら「プログラミングスクール」がおすすめです。
プログラミングのスキルの基礎を身につけるなら「TechAcademy」で1週間の無料体験があるので、これで「プログラミングの基礎」を学ぶのにおすすめですよ。
