この記事では、SQL Serverのテーブルデータの値をC#のグラフに表示させる方法についてご説明します。
【動画】SQL Serverのテーブルデータの値をC#のグラフに表示させる実際の動き
本題に入る前に、まずは次の動画をご覧ください。
SQL Serverのデータベースに接続し、テーブル内にあるデータを取得し、グラフに表示させます。
参照設定が必要
今回のコードを実行するのに参照設定が必要です。
今回は以下の参照設定を行います。
- 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を参照設定すると、グラフの作成や取得したデータのグラフ表示など、グラフに関する様々な操作ができるようになります。
今回はSQL Serverのテーブルデータから表のデータをグラフ表示させるので、この参照設定が必要になります。
②System.Configuration(System.Configuration.dll)
System.Configurationを参照設定すると、アプリケーションの設定をapp.configのような外部の設定ファイルに分けることができ、コンパイルの必要が無く設定値を変更することができるようになります。
System.Configurationを参照設定しないと、「ConfigurationManager」が存在しないとのことでエラーになってしまうので、この参照設定が必要になります。
コードの流れ
インポートする名前空間には、データの取得やグラフ描画などがあります。
SQL Serverのテーブルデータとフォームの例
SQL Serverのテーブルデータ
今回は下のSQL Serverのテーブルデータを用意しました。
「tbl_test」のテーブルにデータが存在しています。
今回は「score」の値をグラフに出力します。
C#のフォーム
今回は下のC#のフォームを用意しました。
フォームにある「グラフの出力」ボタンをクリックすると、下のとおりSQL Serverのテーブルデータをグラフ表示します。
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=(LocalDB)\MSSQLLocalDB;Initial Catalog={0};Integrated Security=True" />
<!-- SQL Serverのデータベース名 -->
<add key="DBName" value="CS_01" />
</appSettings>
</configuration>
注目すべきコード
最初に見て頂きたいのは8行目と11行目です。
8行目は、SQL Serverのデータベースに接続するのに必要な接続文字列を「DBConnString」というキーに設定しているコードです。
11行目は、SQL Serverのデータベース名を「DBName」というキーに設定しているコードです。
「DBConnString」と「DBName」のキーの値をフォーム側のコードが参照して使います。
フォームのコード
using System;
using System.Windows.Forms;
using System.Data.SqlClient;
using System.Windows.Forms.DataVisualization.Charting;
using System.Configuration;
namespace wfcs_0071
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void button1_Click(object sender, EventArgs e)
{
// チャートを初期化するメソッドを呼び出す
Chart chart = InitializeChart();
// SQL Serverのテーブルからデータを読み込み、シリーズを作成し、グラフに追加する
SeriesFromSQLServer(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 SeriesFromSQLServer(Chart chart)
{
// App.configのappSettingsタグ内に記述した「DBConnString」のキーの値を取得して変数「connStrTemplate」に格納する
string connStrTemplate = ConfigurationManager.AppSettings["DBConnString"];
// App.configのappSettingsタグ内に記述した「DBName」のキーの値を取得して変数「dbPathStr」に格納する
string dbPathStr = ConfigurationManager.AppSettings["DBName"];
// connStrTemplateの{0}の部分を、「dbPathStr」の値に置き換える
string connectionString = string.Format(connStrTemplate, dbPathStr);
// SQL Serverの「syain」テーブルからデータを取得するSELECT文
string query = "SELECT person, score FROM tbl_test";
using (SqlConnection connection = new SqlConnection(connectionString))
{
// SELECT文を実行するためのSqlCommandインスタンスを生成する
SqlCommand command = new SqlCommand(query, connection);
// データベース接続を開く
connection.Open();
// SELECT文を実行し、結果をSqlDataReaderに格納する
SqlDataReader reader = command.ExecuteReader();
// シリーズの名前を用意する
string seriesName = "SeriesTest";
// シリーズ用のインスタンスを生成する
Series series = new Series(seriesName)
{
// シリーズのチャートタイプを設定する
ChartType = SeriesChartType.Column,
// シリーズのポイント幅を設定する
["PointWidth"] = "0.5"
};
// シリーズを追加する
chart.Series.Add(series);
// 取得したデータの最終行まで処理を繰り返すwhileループ
while (reader.Read())
{
// SQL Serverのテーブルから取得した「name」の値を変数nameに格納する
string person = reader["person"].ToString();
// SQL Serverのテーブルから取得した「age」の値を変数ageに格納する
int score = Convert.ToInt32(reader["score"]);
// シリーズにデータポイントを追加する
chart.Series[seriesName].Points.AddXY(person, score);
}
// readerを閉じる
reader.Close();
}
// フォームにチャートを追加する
this.Controls.Add(chart);
}
}
}
注目すべきコード①
最初に見て頂きたいのは1行目から5行目です。
using System; using System.Windows.Forms; using System.Data.SqlClient; using System.Windows.Forms.DataVisualization.Charting; using System.Configuration;
コードの説明
以上のコードは、必要な名前空間の使用宣言およびエイリアス宣言のコードです。
コードの詳細
1行目は、.NET Frameworkの基本クラスのセットを参照する名前空間です。
2行目は、ウィンドウやダイアログボックスを使う名前空間です。
3行目は、SQL Serverへの接続とデータの操作を行うためのクラスを提供する名前空間です。
4行目は、チャートやグラフを作成し、表示するためのクラスとコントロールを提供する名前空間です。
5行目は、アプリケーションの実行時設定やカスタム設定を読み込み、保存することができる名前空間です。
アプリケーションの設定をapp.configのような外部の設定ファイルに分けることができ、コンパイルの必要が無く設定値を変更することができるようになります。
注目すべきコード②
次に見て頂きたいのは18行目から21行目です。
// チャートを初期化するメソッドを呼び出す
Chart chart = InitializeChart();
// SQL Serverのテーブルからデータを読み込み、シリーズを作成し、グラフに追加する
SeriesFromSQLServer(chart);
コードの説明
以上のコードは、使用するグラフを初期化するInitializeChartメソッドと、SQL Serverのテーブルデータをグラフに出力するメソッドSeriesFromSQLServerを呼び出す処理のコードです。
InitializeChartメソッドが何行目にあるのかというと24行目にあります。
private Chart InitializeChart()
また、SeriesFromSQLServerメソッドが何行目にあるのかというと48行目にあります。
private void SeriesFromSQLServer(Chart chart)
SeriesFromSQLServerメソッドを呼び出す際は初期化したグラフ用のインスタンスを引数に渡します。
注目すべきコード②
次に見て頂きたいのは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行目から108行目です。
private void SeriesFromSQLServer(Chart chart)
{
// App.configのappSettingsタグ内に記述した「DBConnString」のキーの値を取得して変数「connStrTemplate」に格納する
string connStrTemplate = ConfigurationManager.AppSettings["DBConnString"];
// App.configのappSettingsタグ内に記述した「DBName」のキーの値を取得して変数「dbPathStr」に格納する
string dbPathStr = ConfigurationManager.AppSettings["DBName"];
// connStrTemplateの{0}の部分を、「dbPathStr」の値に置き換える
string connectionString = string.Format(connStrTemplate, dbPathStr);
// SQL Serverの「syain」テーブルからデータを取得するSELECT文
string query = "SELECT person, score FROM tbl_test";
using (SqlConnection connection = new SqlConnection(connectionString))
{
// SELECT文を実行するためのSqlCommandインスタンスを生成する
SqlCommand command = new SqlCommand(query, connection);
// データベース接続を開く
connection.Open();
// SELECT文を実行し、結果をreaderに格納する
SqlDataReader reader = command.ExecuteReader();
// シリーズの名前を用意する
string seriesName = "SeriesTest";
// シリーズ用のインスタンスを生成する
Series series = new Series(seriesName)
{
// シリーズのチャートタイプを設定する
ChartType = SeriesChartType.Column,
// シリーズのポイント幅を設定する
["PointWidth"] = "0.5"
};
// シリーズを追加する
chart.Series.Add(series);
// 取得したデータの最終行まで処理を繰り返すwhileループ
while (reader.Read())
{
// SQL Serverのテーブルから取得した「name」の値を変数nameに格納する
string person = reader["person"].ToString();
// SQL Serverのテーブルから取得した「age」の値を変数ageに格納する
int score = Convert.ToInt32(reader["score"]);
// シリーズにデータポイントを追加する
chart.Series[seriesName].Points.AddXY(person, score);
}
// readerを閉じる
reader.Close();
}
// フォームにチャートを追加する
this.Controls.Add(chart);
}
コードの説明
以上のコードは、値をグラフに追加する処理のコードです。
コードの詳細
51行目のコードは、App.configのappSettingsタグ内に記述した「DBConnString」のキーの値を取得して変数に格納するコードです。
「DBConnString」のキーの値は変数「connStrTemplate」に格納します。
54行目のコードは、App.configのappSettingsタグ内に記述した「DBConnString」のキーの値を取得して変数に格納するコードです。
「DBConnString」のキーの値は変数「connStrTemplate」に格納します。
57行目のコードは、connStrTemplateの{0}の部分を、「dbPathStr」の値に置き換える処理のコードです。
connStrTemplateの{0}の部分を、「dbPathStr」の値に置き換える、とはどういうことかというと、{0}の部分をSQL Serverのデータベース名に置き換える、ということです。
今回は接続文字列と、SQL Serverのデータベースのフルパスを分けてそれぞれ「DBConnString」と「DBName」とキーを分けてあるので、フォームのコード側で接続文字列と、SQL Serverのデータベースのフルパスを一つの文字列に組み立てています。
参考までに、string.Format実行前と実行後の状態を以下にお見せします。
以上のように、{0}の部分が「CS_01」に置き換わっています。
“Data Source=(LocalDB)\\MSSQLLocalDB;Initial Catalog={0};Integrated Security=True”
“Data Source=(LocalDB)\\MSSQLLocalDB;Initial Catalog=CS_01;Integrated Security=True”
60行目のコードでは、SQL Serverの「tbl_test」テーブルからデータを取得するSELECT文を用意しています。
62行目のコードでは、SqlConnectionオブジェクトを作成し、接続文字列を使用してデータベースに接続しています。
65行目のコードでは、SELECT文を実行するためのSqlCommandインスタンスを生成しています。
68行目のコードでは、SQL Serverのデータベース接続を開いています。
71行目のコードでは、SELECT文を実行し、結果をreaderに格納しています。
74行目のコードは、シリーズ用のインスタンス名に設定する名前を取得するコードです。
77行目のコードでは、シリーズ用のインスタンスを生成します。
80目のコードでは、リーズのチャートタイプを設定します。
83行目のコードでは、シリーズのポイント幅を設定します。
今回は「Column」(縦の棒グラフ)を指定しています。
87行目のコードでは、シリーズをチャートに追加します。
90行目のコードは、取得したデータの最終行まで処理を繰り返すwhile文です。
今回は10件あるテーブルデータを取得しているので10件目まで処理を繰り返します。
93行目のコードでは、SQL Serverのテーブルから取得した「person」の値を変数personに格納しています。
96行目のコードでは、SQL Serverのテーブルから取得した「score」の値を変数scoreに格納しています。
なお、Convert.ToInt32メソッドを使って「score」の値をint型に型変換しています。
99行目のコードでは、シリーズにカテゴリ(person)とデータ(score)を追加します。(カテゴリの数だけ繰り返す)
103行目のコードでは、readerを閉じています。
107行目のコードでは、フォームにチャートを追加します。
動作確認
「SQL Serverのテーブルデータとフォームの例」をご覧ください。
最後に
この記事では、SQL Serverのテーブルデータの値をC#のグラフに表示させる方法についてご説明しました。
SQL Serverのテーブルデータの値をC#のグラフに表示させたい場合は本記事を参考にして頂けたら幸いです。
プログラミングのスキルを習得するなら
プログラミングのスキルを習得したい、今のスキルをもっと高めたい、そう考えているなら「プログラミングスクール」がおすすめです。
プログラミングのスキルの基礎を身につけるなら「TechAcademy」で1週間の無料体験があるので、これで「プログラミングの基礎」を学ぶのにおすすめですよ。
