この記事では、値をC#のグラフに表示させる方法についてご説明します。
【動画】値をC#のグラフに表示させる実際の動き
本題に入る前に、まずは次の動画をご覧ください。
カテゴリ名とグラフの高さに使う値を取得し、その値をグラフに表示させています。
参照設定が必要
今回のコードを実行するのに参照設定が必要です。
今回は以下の参照設定を行います。
- System.Windows.Forms.DataVisualization(System.Windows.Forms.DataVisualization.dll)
①System.Windows.Forms.DataVisualization(System.Windows.Forms.DataVisualization.dll)
System.Windows.Forms.DataVisualizationを参照設定すると、グラフの作成や取得したデータのグラフ表示など、グラフに関する様々な操作ができるようになります。
今回はデータをグラフ表示させるので、この参照設定が必要になります。
コードの流れ
インポートする名前空間には、データの取得やグラフ描画などがあります。
フォームの例
今回は下のC#のフォームを用意しました。
また、グラフに出力したい値は下のとおりです。
フォームにある「グラフの表示」ボタンをクリックすると、下のとおりデータをグラフ表示します。
C#のコード(例)
using System;
using System.Windows.Forms;
using System.Windows.Forms.DataVisualization.Charting;
using Chart = System.Windows.Forms.DataVisualization.Charting.Chart;
namespace wfcs_0065
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void button1_Click(object sender, EventArgs e)
{
// チャートを初期化するメソッドを呼び出す
Chart chart = InitializeChart();
// 表のデータからシリーズを作成し、グラフに追加する
SeriesFromTable(chart);
}
private Chart InitializeChart()
{
// グラフ用のインスタンスを生成する
Chart chart = new Chart
{
// グラフの縦と横の幅を設定する(横幅・縦幅)
Size = new System.Drawing.Size(400, 300),
// フォーム上に設置するグラフの位置を設定する(横・縦)
Location = new System.Drawing.Point(120, 20)
};
// チャートエリア用のインスタンスを生成する
ChartArea chartArea = new ChartArea();
// グラフにチャートエリアを追加する
chart.ChartAreas.Add(chartArea);
// X軸のラベル間隔を設定する
chartArea.AxisX.LabelStyle.Interval = 0;
// 設定を施したchartオブジェクトを返す
return chart;
}
private void SeriesFromTable(Chart chart)
{
// シリーズの名前を用意する
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;
// カテゴリ名の配列(チャートのX軸に表示されるラベルとして使われる)
string[] seriesArray = { "データ1", "データ2", "データ3" };
// ポイントの配列(グラフの高さに使用)
int[] pointsArray = { 100, 200, 150 };
// 配列の要素数分処理をくりかえすfor文
for (int i = 0; i < seriesArray.Length; i++)
{
// シリーズにデータポイントを追加する
chart.Series[srsStr].Points.AddXY(seriesArray[i], pointsArray[i]);
}
// フォームにチャートを追加する
this.Controls.Add(chart);
}
}
}
注目すべきコード①
最初に見て頂きたいのは1行目から4行目です。
using System; using System.Windows.Forms; using System.Windows.Forms.DataVisualization.Charting; using Chart = System.Windows.Forms.DataVisualization.Charting.Chart;
コードの説明
以上のコードは、必要な名前空間の使用宣言およびエイリアス宣言のコードです。
コードの詳細
1行目は、.NET Frameworkの基本クラスのセットを参照する名前空間です。
2行目は、ウィンドウやダイアログボックスを使う名前空間です。
3行目は、チャートやグラフを作成し、表示するためのクラスとコントロールを提供する名前空間です。
4行目は、System.Windows.Forms.DataVisualization.Charting.Chartクラスに対してChartという名前を定義しています。
注目すべきコード②
次に見て頂きたいのは17行目から20行目です。
// チャートを初期化するメソッドを呼び出す
Chart chart = InitializeChart();
// 表のデータからシリーズを作成し、グラフに追加する
SeriesFromTable(chart);
コードの説明
以上のコードは、使用するグラフを初期化するInitializeChartメソッドと、データをグラフに出力するメソッドSeriesFromTableを呼び出す処理のコードです。
InitializeChartメソッドが何行目にあるのかというと23行目にあります。
private Chart InitializeChart()
47行目のコードでは、データをグラフに出力するメソッドSeriesFromTableを呼び出すコードです。
SeriesFromTableメソッドが何行目にあるのかというと48行目にあります。
private void SeriesFromTable(Chart chart)
SeriesFromTableメソッドを呼び出す際は初期化したグラフ用のインスタンスを引数に渡します。
注目すべきコード③
次に見て頂きたいのは23行目から46行目です。
private Chart InitializeChart()
{
// グラフ用のインスタンスを生成する
Chart chart = new Chart
{
// グラフの縦と横の幅を設定する(横幅・縦幅)
Size = new System.Drawing.Size(400, 300),
// フォーム上に設置するグラフの位置を設定する(横・縦)
Location = new System.Drawing.Point(120, 20)
};
// チャートエリア用のインスタンスを生成する
ChartArea chartArea = new ChartArea();
// グラフにチャートエリアを追加する
chart.ChartAreas.Add(chartArea);
// X軸のラベル間隔を設定する
chartArea.AxisX.LabelStyle.Interval = 0;
// 設定を施したchartオブジェクトを返す
return chart;
}
コードの説明
以上のコードは、グラフの各設定を行う処理のコードです。
コードの詳細
26行目のコードでは、グラフ用のインスタンスを生成し、グラフの横幅と縦幅(29行目)、設置する位置(縦・横)(32行目)を設定します。
36行目のコードではチャートエリア用のインスタンスを生成し、39行目でグラフにチャートエリアを追加します。
42行目のコードでは、X軸のラベル間隔を設定します。
0を設定すると、X軸のラベルをすべて表示させます。(ただし、データ件数次第(多い場合)で何件か表示されない場合があります)
45行目のコードでは、各設定したchartオブジェクトを返します。
この処理により、このメソッドを呼び出したところでグラフを使うことができるようになります。
注目すべきコード④
次に見て頂きたいのは48行目から83行目です。
private void SeriesFromTable(Chart chart)
{
// シリーズの名前を用意する
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;
// カテゴリ名の配列(チャートのX軸に表示されるラベルとして使われる)
string[] seriesArray = { "データ1", "データ2", "データ3" };
// ポイントの配列(グラフの高さに使用)
int[] pointsArray = { 100, 200, 150 };
// 配列の要素数分処理をくりかえすfor文
for (int i = 0; i < seriesArray.Length; i++)
{
// シリーズにデータポイントを追加する
chart.Series[srsStr].Points.AddXY(seriesArray[i], pointsArray[i]);
}
// フォームにチャートを追加する
this.Controls.Add(chart);
}
コードの説明
以上のコードは、値をグラフに追加する処理のコードです。
コードの詳細
51行目のコードは、シリーズ用のインスタンス名に設定する名前を取得するコードです。
54行目のコードでは、シリーズ用のインスタンスを生成します。
57行目のコードでは、シリーズのポイント幅を設定します。
60行目のコードでは、シリーズをチャートに追加します。
63目のコードでは、シリーズのポイントをクリアします。
66目のコードでは、リーズのチャートタイプを設定します。
今回は「Column」(縦の棒グラフ)を指定しています。
69行目ではカテゴリ名を、72行目ではポイントを取得し、78行目でシリーズにカテゴリとデータを追加します。(カテゴリの数だけ繰り返す)
82行目のコードでは、フォームにチャートを追加します。
動作確認
「フォームの例」をご覧ください。
最後に
この記事では、値をC#のグラフに表示させる方法についてご説明しました。
値をC#のグラフに表示させたい場合は本記事を参考にして頂けたら幸いです。
プログラミングのスキルを習得するなら
プログラミングのスキルを習得したい、今のスキルをもっと高めたい、そう考えているなら「プログラミングスクール」がおすすめです。
プログラミングのスキルの基礎を身につけるなら「TechAcademy」で1週間の無料体験があるので、これで「プログラミングの基礎」を学ぶのにおすすめですよ。
