この記事では、CSVファイルの値をC#のグラフに表示させる方法についてご説明します。
【動画】CSVファイルの値をC#のグラフに表示させる実際の動き
本題に入る前に、まずは次の動画をご覧ください。
CSVファイルを開き、CSVファイル内にあるデータを取得し、グラフに表示させます。
参照設定が必要
今回のコードを実行するのに参照設定が必要です。
今回は以下の参照設定を行います。
- System.Windows.Forms.DataVisualization(System.Windows.Forms.DataVisualization.dll)
①System.Windows.Forms.DataVisualization(System.Windows.Forms.DataVisualization.dll)
System.Windows.Forms.DataVisualizationを参照設定すると、グラフの作成や取得したデータのグラフ表示など、グラフに関する様々な操作ができるようになります。
今回はCSVファイルから表のデータをグラフ表示させるので、この参照設定が必要になります。
コードの流れ
インポートする名前空間には、データの取得やグラフ描画などがあります。
CSVファイルとフォームの例
CSVファイル
今回は下のCSVファイルを用意しました。
C#のフォーム
今回は下のC#のフォームを用意しました。
フォームにある「グラフの表示」ボタンをクリックすると、下のとおりCSVファイルのデータをグラフ表示します。
C#のコード(例)
App.configのコード
<?xml version="1.0" encoding="utf-8" ?> <configuration> <startup> <supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.7.2" /> </startup> <appSettings> <!-- CSVファイルのフルパス --> <add key="CSVFilePath" value="C:\work\10_勉強\21_C#\0069\0069.csv" /> </appSettings> </configuration>
注目すべきコード
見て頂きたいのは8行目です。
8行目は、CSVファイルのフルパスを「CSVFilePath」というキーに設定しているコードです。
「CSVFilePath」のキーの値をフォーム側のコードが参照して使います。
ちなみに、今回扱うCSVファイルは下の画像のファイルです。(C:\work\10_勉強\21_C#\0069\0069.csv)
フォームのコード
using System;
using System.Configuration;
using System.IO;
using System.Windows.Forms;
using System.Windows.Forms.DataVisualization.Charting;
using Chart = System.Windows.Forms.DataVisualization.Charting.Chart;
namespace wfcs_0069
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void button1_Click(object sender, EventArgs e)
{
// チャートを初期化するメソッドを呼び出す
Chart chart = InitializeChart();
// CSVファイルからデータを読み込み、シリーズを作成し、グラフに追加する
SeriesFromCSV(chart);
}
private Chart InitializeChart()
{
// グラフ用のインスタンスを生成する
Chart chart = new Chart
{
// グラフの縦と横の幅を設定する(横幅・縦幅)
Size = new System.Drawing.Size(900, 500),
// フォーム上に設置するグラフの位置を設定する(横・縦)
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 SeriesFromCSV(Chart chart)
{
// App.configのappSettingsタグ内に記述した「CSVFilePath」のキーの値を取得して変数「CSVFilePath」に格納する
string CSVFilePath = ConfigurationManager.AppSettings["CSVFilePath"];
// シリーズの名前を用意する
string srsStr = "SeriesTest";
// シリーズ用のインスタンスを生成する
Series series = new Series(srsStr);
// シリーズのポイント幅を設定する
series["PointWidth"] = "0.5";
// シリーズをチャートに追加する
chart.Series.Add(series);
// シリーズのポイントをクリアする
chart.Series[srsStr].Points.Clear();
// シリーズのチャートタイプを設定する
chart.Series[srsStr].ChartType = SeriesChartType.Column;
// CSVファイルを読み込むStreamReaderのインスタンスを生成する
using (var sr = new StreamReader(CSVFilePath))
{
// CSVファイルの1行目を読み込む
// ⇒ヘッダ行の1行をスキップするため、空で1行目を読み込む
sr.ReadLine();
// ファイルの終わりまで読み込むWhileループ
while (!sr.EndOfStream)
{
// 1つ行を取得して変数lineに格納する
var line = sr.ReadLine();
// 読み込んだ行をカンマで分割して配列valuesに格納する
var values = line.Split(',');
// 2列目(名前)を取得して変数nameに格納する
string name = values[1].Trim('"');
// 4列目(在庫)を取得して変数stockに格納する
int stock = int.Parse(values[3].Trim('"'));
// シリーズにデータポイントを追加する
chart.Series[srsStr].Points.AddXY(name, stock);
}
}
// フォームにチャートを追加する
this.Controls.Add(chart);
}
}
}
注目すべきコード①
最初に見て頂きたいのは1行目から10行目です。
using System; using System.Windows.Forms; using System.Configuration; using System.IO; using System.Windows.Forms.DataVisualization.Charting; using Chart = System.Windows.Forms.DataVisualization.Charting.Chart;
コードの説明
以上のコードは、必要な名前空間の使用宣言およびエイリアス宣言のコードです。
コードの詳細
1行目は、.NET Frameworkの基本クラスのセットを参照する名前空間です。
2行目は、ウィンドウやダイアログボックスを使う名前空間です。
3行目は、アプリケーションの実行時設定やカスタム設定を読み込み、保存することができる名前空間です。
アプリケーションの設定をapp.configのような外部の設定ファイルに分けることができ、コンパイルの必要が無く設定値を変更することができるようになります。
4行目は、ファイル読み書きなど入出力に関連するクラスへのアクセスを提供する名前空間です。
5行目は、チャートやグラフを作成し、表示するためのクラスとコントロールを提供する名前空間です。
6行目は、System.Windows.Forms.DataVisualization.Charting.Chartクラスに対してChartという名前を定義しています。
注目すべきコード②
次に見て頂きたいのは19行目から22行目です。
// チャートを初期化するメソッドを呼び出す
Chart chart = InitializeChart();
// CSVファイルからデータを読み込み、シリーズを作成し、グラフに追加する
SeriesFromCSV(chart);
コードの説明
以上のコードは、使用するグラフを初期化するInitializeChartメソッドと、CSVファイルの表のデータをグラフに出力するメソッドSeriesFromCSVを呼び出す処理のコードです。
InitializeChartメソッドが何行目にあるのかというと25行目にあります。
private Chart InitializeChart()
47行目のコードでは、CSVファイルの表のデータをグラフに出力するメソッドSeriesFromCSVを呼び出すコードです。
SeriesFromCSVメソッドが何行目にあるのかというと50行目にあります。
private void SeriesFromCSV(Chart chart)
SeriesFromCSVメソッドを呼び出す際は初期化したグラフ用のインスタンスを引数に渡します。
注目すべきコード②
次に見て頂きたいのは25行目から48行目です。
private Chart InitializeChart()
{
// グラフ用のインスタンスを生成する
Chart chart = new Chart
{
// グラフの縦と横の幅を設定する(横幅・縦幅)
Size = new System.Drawing.Size(900, 500),
// フォーム上に設置するグラフの位置を設定する(横・縦)
Location = new System.Drawing.Point(120, 20)
};
// チャートエリア用のインスタンスを生成する
ChartArea chartArea = new ChartArea();
// グラフにチャートエリアを追加する
chart.ChartAreas.Add(chartArea);
// X軸のラベル間隔を設定する
chartArea.AxisX.LabelStyle.Interval = 1;
// 設定を施したchartオブジェクトを返す
return chart;
}
コードの説明
以上のコードは、以グラフの各設定を行う処理のコードです。
コードの詳細
28行目のコードでは、グラフ用のインスタンスを生成し、グラフの横幅と縦幅(31行目)、設置する位置(縦・横)(34行目)を設定します。
38行目のコードではチャートエリア用のインスタンスを生成し、41行目でグラフにチャートエリアを追加します。
44行目のコードでは、X軸のラベル間隔を設定します。
1を設定すると、X軸のラベルをすべて表示させます。
47行目のコードでは、各設定したchartオブジェクトを返します。
この処理により、このメソッドを呼び出したところでグラフを使うことができるようになります。
注目すべきコード②
次に見て頂きたいのは50行目から102行目です。
private void SeriesFromCSV(Chart chart)
{
// App.configのappSettingsタグ内に記述した「wdFilePath」のキーの値を取得して変数「wdFilePath」に格納する
string CSVFilePath = ConfigurationManager.AppSettings["CSVFilePath"];
// シリーズの名前を用意する
string srsStr = "SeriesTest";
// シリーズ用のインスタンスを生成する
Series series = new Series(srsStr);
// シリーズのポイント幅を設定する
series["PointWidth"] = "0.5";
// シリーズをチャートに追加する
chart.Series.Add(series);
// シリーズのポイントをクリアする
chart.Series[srsStr].Points.Clear();
// シリーズのチャートタイプを設定する
chart.Series[srsStr].ChartType = SeriesChartType.Column;
// CSVファイルを読み込むStreamReaderのインスタンスを生成する
using (var sr = new StreamReader(CSVFilePath))
{
// CSVファイルの1行目を読み込む
// ⇒ヘッダ行の1行をスキップするため、空で1行目を読み込む
sr.ReadLine();
// ファイルの終わりまで読み込むWhileループ
while (!sr.EndOfStream)
{
// 1つ行を取得して変数lineに格納する
var line = sr.ReadLine();
// 読み込んだ行をカンマで分割して配列valuesに格納する
var values = line.Split(',');
// 2列目(名前)を取得して変数nameに格納する
string name = values[1].Trim('"');
// 4列目(在庫)を取得して変数stockに格納する
int stock = int.Parse(values[3].Trim('"'));
// シリーズにデータポイントを追加する
chart.Series[srsStr].Points.AddXY(name, stock);
}
}
// フォームにチャートを追加する
this.Controls.Add(chart);
}
コードの説明
以上のコードは、値をグラフに追加する処理のコードです。
コードの詳細
53行目のコードは、App.configのappSettingsタグ内に記述した「CSVFilePath」のキーの値を取得して変数に格納するコードです。
「CSVFilePath」のキーの値は変数「CSVFilePath」に格納します。
56行目のコードは、シリーズ用のインスタンス名に設定する名前を取得するコードです。
59行目のコードでは、シリーズ用のインスタンスを生成します。
62行目のコードでは、シリーズのポイント幅を設定します。
65行目のコードでは、シリーズをチャートに追加します。
68目のコードでは、シリーズのポイントをクリアします。
71目のコードでは、リーズのチャートタイプを設定します。
今回は「Column」(縦の棒グラフ)を指定しています。
74行目のコードでは、CSVファイルを読み込むStreamReaderのインスタンスを生成します。
78行目のコードでは、CSVファイルの1行目を読み込みます。
グラフには1行目のヘッダ行が不要なので空で1行目を読み込みます。(1行目をスキップ。この1行目は使わない)
81行目のコードは、ファイルの終わりまで読み込むWhile文です。
「!sr.EndOfStream」は、行の最後でない場合を意味します。
84行目のコードでは、1つ行を取得して変数lineに格納します。
87行目のコードでは、読み込んだ行をカンマで分割して配列valuesに格納します。
90行目のコードでは、2列目(名前)を取得して変数nameに格納します。
93行目のコードでは、4列目(在庫)を取得して変数stockに格納します。
96行目のコードでは、シリーズにカテゴリ(name)とデータ(stock)を追加します。(カテゴリの数だけ繰り返す)
101行目のコードでは、フォームにチャートを追加します。
動作確認
「CSVファイルとフォームの例」をご覧ください。
最後に
この記事では、CSVファイルの値をC#のグラフに表示させる方法についてご説明しました。
CSVファイルの値をC#のグラフに表示させたい場合は本記事を参考にして頂けたら幸いです。
プログラミングのスキルを習得するなら
プログラミングのスキルを習得したい、今のスキルをもっと高めたい、そう考えているなら「プログラミングスクール」がおすすめです。
プログラミングのスキルの基礎を身につけるなら「TechAcademy」で1週間の無料体験があるので、これで「プログラミングの基礎」を学ぶのにおすすめですよ。
