【C#】MySQLのテーブルデータの値をC#のグラフに表示させるには

この記事では、MySQLのテーブルデータの値をC#のグラフに表示させる方法についてご説明します。

【動画】MySQLのテーブルデータの値をC#のグラフに表示させる実際の動き

本題に入る前に、まずは次の動画をご覧ください。

MySQLのデータベースに接続し、テーブル内にあるデータを取得してグラフに表示させます。

参照設定が必要

今回のコードを実行するのに参照設定が必要です。

今回は以下の参照設定を行います。

1. System.Windows.Forms.DataVisualization(System.Windows.Forms.DataVisualization.dll)
2. System.Configuration(System.Configuration.dll)

①System.Windows.Forms.DataVisualization(System.Windows.Forms.DataVisualization.dll)

System.Windows.Forms.DataVisualizationを参照設定すると、グラフの作成や取得したデータのグラフ表示など、グラフに関する様々な操作ができるようになります。

今回はMySQLのテーブルから表のデータをグラフ表示させるので、この参照設定が必要になります。

②System.Configuration(System.Configuration.dll)

System.Configurationを参照設定すると、アプリケーションの設定をapp.configのような外部の設定ファイルに分けることができ、コンパイルの必要が無く設定値を変更することができるようになります。

System.Configurationを参照設定しないと、「ConfigurationManager」が存在しないとのことでエラーになってしまうので、この参照設定が必要になります。

コードの流れ

MySQLのテーブルデータとフォームの例

MySQLのテーブルデータ

今回は下のMySQLのテーブルデータを用意しました。

「syain」のテーブルにデータが存在しています。

今回は「age」の値をグラフに出力します。

C#のコード(例)

C#のフォーム

今回は下のC#のフォームを用意しました。

フォームにある「グラフの出力」ボタンをクリックすると、下のとおりMySQLのテーブルデータをグラフ表示します。

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="server={0};port={1};database={2};user={3};password={4}" />

        <!-- 接続したいMySQLのサーバの名称 -->
        <add key="serverVal" value="localhost" />

        <!-- ポートの値 -->
        <add key="portVal" value="3306" />

        <!-- 接続したいデータベース名 -->
        <add key="databaseVal" value="testdb" />

        <!-- MySQLのデータベースに接続するためのユーザ名 -->
        <add key="userVal" value="root" />

        <!-- MySQLのデータベースに接続するためのパスワード -->
        <add key="passwordVal" value="testPass@123456" />

    </appSettings>
</configuration>

注目すべきコード①

最初に見て頂きたいのは10行目から25行目です。

        <!-- 接続文字列 -->
        <add key="DBConnString" value="server={0};port={1};database={2};user={3};password={4}" />

        <!-- 接続したいMySQLのサーバの名称 -->
        <add key="serverVal" value="localhost" />

        <!-- ポートの値 -->
        <add key="portVal" value="3306" />

        <!-- 接続したいデータベース名 -->
        <add key="databaseVal" value="testdb" />

        <!-- MySQLのデータベースに接続するためのユーザ名 -->
        <add key="userVal" value="root" />

        <!-- MySQLのデータベースに接続するためのパスワード -->
        <add key="passwordVal" value="testPass@123456" />

コードの説明

以上のコードは、MySQLのデータベースに接続するのに必要な接続文字列を「DBConnString」というキーに設定しているコードです。

10行目のコードにある{0}、{1}、{2}、{3}、{4}それぞれに、13行目から25行目のキーの値が設定されます。

キーの値はForm側のコードで設定されます。

Form側の処理は、「注目すべきコード④」をご覧ください。

なお、{0}から{4}までの設定値は以下の通りです。

1. {0}「serverVal」：localhost(接続したいMySQLのサーバの名称)
2. {1}「portVal」：3306(ポートの値)
3. {2}「databaseVal」：testdb(接続したいデータベース名)
4. {3}「userVal」：root(MySQLのデータベースに接続するためのユーザ名)
5. {4}「passwordVal」：testPass@123456(MySQLのデータベースに接続するためのパスワード)

フォームのコード

using System;
using System.Windows.Forms;
using MySqlConnector;
using System.Windows.Forms.DataVisualization.Charting;
using System.Configuration;

namespace wfcs_0072
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
        private void button1_Click(object sender, EventArgs e)
        {
            // チャートを初期化するメソッドを呼び出す
            Chart chart = InitializeChart();

            // MySQLのテーブルからデータを読み込み、シリーズを作成し、グラフに追加する
            SeriesFromMySQL(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 SeriesFromMySQL(Chart chart)
        {
            // App.configのappSettingsタグ内に記述した「DBConnString」のキーの値を取得して変数「connStrTemplate」に格納する
            string connStrTemplate = ConfigurationManager.AppSettings["DBConnString"];

            // App.configのappSettingsタグ内に記述した「serverVal」のキーの値を取得して変数「serverVal」に格納する
            string serverVal = ConfigurationManager.AppSettings["serverVal"];

            // App.configのappSettingsタグ内に記述した「portVal」のキーの値を取得して変数「portVal」に格納する
            string portVal = ConfigurationManager.AppSettings["portVal"];

            // App.configのappSettingsタグ内に記述した「databaseVal」のキーの値を取得して変数「databaseVal」に格納する
            string databaseVal = ConfigurationManager.AppSettings["databaseVal"];

            // App.configのappSettingsタグ内に記述した「userVal」のキーの値を取得して変数「userVal」に格納する
            string userVal = ConfigurationManager.AppSettings["userVal"];

            // App.configのappSettingsタグ内に記述した「passwordVal」のキーの値を取得して変数「passwordVal」に格納する
            string passwordVal = ConfigurationManager.AppSettings["passwordVal"];

            // connStrTemplateの{0}、{1}、{2}、{3}、{4}の部分を「serverVal」「portVal」「databaseVal」「userVal」「passwordVal」それぞれの値に置き換える
            string connectionString = string.Format(connStrTemplate, serverVal, portVal, databaseVal, userVal, passwordVal);

            // MySQLの「syain」テーブルからデータを取得するSELECT文を用意する
            string query = "SELECT name, age FROM syain";

            // MySqlConnectionオブジェクトを作成し、接続文字列を使用してデータベースに接続する
            using (MySqlConnection connection = new MySqlConnection(connectionString))
            {
                // SELECT文を実行するためのMySqlCommandインスタンスを生成する
                MySqlCommand command = new MySqlCommand(query, connection);

                // データベース接続を開く
                connection.Open();

                // SELECT文を実行し、結果をreadに格納する
                MySqlDataReader reader = command.ExecuteReader();

                // シリーズの名前を用意する
                string seriesName = "SeriesTest";

                // シリーズ用のインスタンスを生成する
                Series series = new Series(seriesName);

                // シリーズのチャートタイプを設定する
                series.ChartType = SeriesChartType.Column;

                // シリーズのポイント幅を設定する
                series["PointWidth"] = "0.5";

                // シリーズを追加する
                chart.Series.Add(series);

                // 取得したデータの最終行まで処理を繰り返すwhileループ
                while (reader.Read())
                {
                    // MySQLのテーブルから取得した「name」の値を変数nameに格納する
                    string name = reader["name"].ToString();

                    // MySQLのテーブルから取得した「age」の値を変数ageに格納する
                    int age = Convert.ToInt32(reader["age"]);

                    // シリーズにデータポイントを追加する
                    chart.Series[seriesName].Points.AddXY(name, age);
                }

                // readerを閉じる
                reader.Close();
            }

            // フォームにチャートを追加する
            this.Controls.Add(chart);
        }
    }
}

注目すべきコード①

最初に見て頂きたいのは1行目から5行目です。

using System;
using System.Windows.Forms;
using MySqlConnector;
using System.Windows.Forms.DataVisualization.Charting;
using System.Configuration;

コードの説明

以上のコードは、必要な名前空間の使用宣言およびエイリアス宣言のコードです。

コードの詳細

1行目は、.NET Frameworkの基本クラスのセットを参照する名前空間です。

2行目は、ウィンドウやダイアログボックスを使う名前空間です。

3行目は、MySQLへの接続とデータの操作を行うためのクラスです。

4行目は、チャートやグラフを作成し、表示するためのクラスとコントロールを提供する名前空間です。

5行目は、アプリケーションの実行時設定やカスタム設定を読み込み、保存することができる名前空間です。

アプリケーションの設定をapp.configのような外部の設定ファイルに分けることができ、コンパイルの必要が無く設定値を変更することができるようになります。

注目すべきコード②

次に見て頂きたいのは18行目から21行目です。

            // チャートを初期化するメソッドを呼び出す
            Chart chart = InitializeChart();

            // MySQLのテーブルからデータを読み込み、シリーズを作成し、グラフに追加する
            SeriesFromMySQL(chart);

コードの説明

以上のコードは、使用するグラフを初期化するInitializeChartメソッドと、MySQLのテーブルデータをグラフに出力するメソッドSeriesFromMySQLを呼び出す処理のコードです。

InitializeChartメソッドが何行目にあるのかというと24行目にあります。

        private Chart InitializeChart()

また、SeriesFromMySQLメソッドが何行目にあるのかというと48行目にあります。

        private void SeriesFromMySQL(Chart chart)

SeriesFromMySQLメソッドを呼び出す際は初期化したグラフ用のインスタンスを引数に渡します。

注目すべきコード③

次に見て頂きたいのは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 SeriesFromMySQL(Chart chart)
        {
            // App.configのappSettingsタグ内に記述した「DBConnString」のキーの値を取得して変数「connStrTemplate」に格納する
            string connStrTemplate = ConfigurationManager.AppSettings["DBConnString"];

            // App.configのappSettingsタグ内に記述した「serverVal」のキーの値を取得して変数「serverVal」に格納する
            string serverVal = ConfigurationManager.AppSettings["serverVal"];

            // App.configのappSettingsタグ内に記述した「portVal」のキーの値を取得して変数「portVal」に格納する
            string portVal = ConfigurationManager.AppSettings["portVal"];

            // App.configのappSettingsタグ内に記述した「databaseVal」のキーの値を取得して変数「databaseVal」に格納する
            string databaseVal = ConfigurationManager.AppSettings["databaseVal"];

            // App.configのappSettingsタグ内に記述した「userVal」のキーの値を取得して変数「userVal」に格納する
            string userVal = ConfigurationManager.AppSettings["userVal"];

            // App.configのappSettingsタグ内に記述した「passwordVal」のキーの値を取得して変数「passwordVal」に格納する
            string passwordVal = ConfigurationManager.AppSettings["passwordVal"];

            // connStrTemplateの{0}、{1}、{2}、{3}、{4}の部分を「serverVal」「portVal」「databaseVal」「userVal」「passwordVal」それぞれの値に置き換える
            string connectionString = string.Format(connStrTemplate, serverVal, portVal, databaseVal, userVal, passwordVal);

            // MySQLの「syain」テーブルからデータを取得するSELECT文を用意する
            string query = "SELECT name, age FROM syain";

            // MySqlConnectionオブジェクトを作成し、接続文字列を使用してデータベースに接続する
            using (MySqlConnection connection = new MySqlConnection(connectionString))
            {
                // SELECT文を実行するためのMySqlCommandインスタンスを生成する
                MySqlCommand command = new MySqlCommand(query, connection);

                // データベース接続を開く
                connection.Open();

                // SELECT文を実行し、結果をreadに格納する
                MySqlDataReader reader = command.ExecuteReader();

                // シリーズの名前を用意する
                string seriesName = "SeriesTest";

                // シリーズ用のインスタンスを生成する
                Series series = new Series(seriesName);

                // シリーズのチャートタイプを設定する
                series.ChartType = SeriesChartType.Column;

                // シリーズのポイント幅を設定する
                series["PointWidth"] = "0.5";

                // シリーズを追加する
                chart.Series.Add(series);

                // 取得したデータの最終行まで処理を繰り返すwhileループ
                while (reader.Read())
                {
                    // MySQLのテーブルから取得した「name」の値を変数nameに格納する
                    string name = reader["name"].ToString();

                    // MySQLのテーブルから取得した「age」の値を変数ageに格納する
                    int age = Convert.ToInt32(reader["age"]);

                    // シリーズにデータポイントを追加する
                    chart.Series[seriesName].Points.AddXY(name, age);
                }

                // readerを閉じる
                reader.Close();
            }

            // フォームにチャートを追加する
            this.Controls.Add(chart);
        }

コードの説明

以上のコードは、値をグラフに追加する処理のコードです。

コードの詳細

51行目では、「DBConnString」のキーの値を変数connStrTemplateに格納しています。

54行目では、「serverVal」のキーの値を変数serverValに格納しています。

57行目では、「portVal」のキーの値を変数portValに格納しています。

60行目では、「databaseVal」のキーの値を変数databaseValに格納しています。

63行目では、「userVal」のキーの値を変数userValに格納しています。

66行目では、「passwordVal」のキーの値を変数passwordValに格納しています。

69行目のコードは、connStrTemplateの{0}、{1}、{2}、{3}、{4}の部分を「serverVal」「portVal」「databaseVal」「userVal」「passwordVal」それぞれの値に置き換える処理のコードです。

1. serverVal：localhost(接続したいMySQLのサーバの名称)
2. portVal：3306(ポートの値)
3. databaseVal：testdb(接続したいデータベース名)
4. userVal：root(MySQLのデータベースに接続するためのユーザ名)
5. passwordVal：testPass@123456(MySQLのデータベースに接続するためのパスワード)

置き換える前と後の状態は以下の通りです。

変数connStrTemplateには{0}、{1}、{2}、{3}、{4}が含まれていますが、string.Formatを実行すると、{0}、{1}、{2}、{3}、{4}の部分が「serverVal」「portVal」「databaseVal」「userVal」「passwordVal」それぞれの値に置き換わります。(connectionStringに格納されます)

以上により、MySQLへの接続文字列が取得できました。

72行目のコードでは、MySQLの「syain」テーブルからデータを取得するSELECT文を用意しています。

75行目のコードでは、MySqlConnectionオブジェクトを作成し、接続文字列を使用してデータベースに接続しています。

78行目のコードでは、SELECT文を実行するためのMySqlCommandインスタンスを生成しています。

81行目のコードでは、MySQLのデータベース接続を開いています。

84行目のコードでは、SELECT文を実行し、結果をreaderに格納しています。

87行目のコードは、シリーズ用のインスタンス名に設定する名前を取得するコードです。

90行目のコードでは、シリーズ用のインスタンスを生成します。

93目のコードでは、リーズのチャートタイプを設定します。

96行目のコードでは、シリーズのポイント幅を設定します。

今回は「Column」(縦の棒グラフ)を指定しています。

99行目のコードでは、シリーズをチャートに追加します。

102行目のコードは、取得したデータの最終行まで処理を繰り返すwhile文です。

今回は10件あるテーブルデータを取得しているので10件目まで処理を繰り返します。

105行目のコードでは、MySQLのテーブルから取得した「person」の値を変数personに格納しています。

108行目のコードでは、MySQLのテーブルから取得した「score」の値を変数scoreに格納しています。

なお、Convert.ToInt32メソッドを使って「score」の値をint型に型変換しています。

111行目のコードでは、シリーズにカテゴリ(person)とデータ(score)を追加します。(カテゴリの数だけ繰り返す)

115行目のコードでは、readerを閉じています。

119行目のコードでは、フォームにチャートを追加します。

動作確認

「MySQLのテーブルデータとフォームの例」をご覧ください。

最後に

この記事では、MySQLのテーブルデータの値をC#のグラフに表示させる方法についてご説明しました。

MySQLのテーブルデータの値をC#のグラフに表示させたい場合は本記事を参考にして頂けたら幸いです。

プログラミングのスキルを習得するなら

プログラミングのスキルを習得したい、今のスキルをもっと高めたい、そう考えているなら「プログラミングスクール」がおすすめです。

プログラミングのスキルの基礎を身につけるなら「TechAcademy」で1週間の無料体験があるので、これで「プログラミングの基礎」を学ぶのにおすすめですよ。

→　TechAcademyの「1週間 無料体験」はこちら