棒グラフ

データのChartを追加




using を追加します。

using System.Windows.Forms.DataVisualization.Charting;

グラフのデータはSeriesクラスに格納し、それをグラフに追加すると表示してくれます。

private void Form1_Load(object sender, EventArgs e)
{
    Series data = new Series();
    data.Points.AddXY(1, 10);
    data.Points.AddXY(2, 20);
    data.Points.AddXY(3, 30);
    data.Points.AddXY(4, 40);
    data.Points.AddXY(5, 50);

    this.chart1.Series.Add(data);
}

オレンジ色のグラフが追加したものです。


青色は、デフォルトで存在するデータです。
プロパティのSeriesを選択。
SeriesコレクションエディタのPointsを選択。




DataPointコレクションエディタ画面で、データを追加します。
追加して、データのXValueとYValueを設定します。

0→XValue:1 YValue:50
1→XValue:2 YValue:40
2→XValue:3 YValue:30
3→XValue:4 YValue:20
4→XValue:5 YValue:10

を設定しました。

これで、デフォルトの青色のデータが表示されるはずです。


青色のグラフが追加されました。

判例の名称を変更してみたいもんです。
データは、SeriesインスタンスをAddしただけなので、foreachでぐるぐる回してみます。

private void Form1_Load(object sender, EventArgs e)
{
    Series data = new Series();
    data.Points.AddXY(1, 10);
    data.Points.AddXY(2, 20);
    data.Points.AddXY(3, 30);
    data.Points.AddXY(4, 40);
    data.Points.AddXY(5, 50);
   
    this.chart1.Series.Add(data);

    foreach (Series s in this.chart1.Series)
    {
        MessageBox.Show(s.Name);
    }
}

Series1
Series2
の順に表示されました。


ということは、Seriesをインスタンス化するときに、Name属性に指定すればよいようです。

private void Form1_Load(object sender, EventArgs e)
{
    Series data = new Series();
    data.Points.AddXY(1, 10);
    data.Points.AddXY(2, 20);
    data.Points.AddXY(3, 30);
    data.Points.AddXY(4, 40);
    data.Points.AddXY(5, 50);
    data.Name = "Test";

    this.chart1.Series.Add(data);
}

Testに変わっています。

private void Form1_Load(object sender, EventArgs e)
{
    Series data = new Series();
    data.Points.AddXY(1, 10);
    data.Points.AddXY(2, 20);
    data.Points.AddXY(3, 30);
    data.Points.AddXY(4, 40);
    data.Points.AddXY(5, 50);

    this.chart1.Series.Add(data);
    this.chart1.Series[1].Name = "名前変更";
}

デフォルトの青いデータの後に追加したので、２つ目のデータなので
this.chart1.Series[1].Nameで変更することもできます。


グラフの色は、SeriesのColorに設定すれば変えられます。

private void Form1_Load(object sender, EventArgs e)
{
    Series data = new Series();
    data.Points.AddXY(1, 10);
    data.Points.AddXY(2, 20);
    data.Points.AddXY(3, 30);
    data.Points.AddXY(4, 40);
    data.Points.AddXY(5, 50);
    data.Color = Color.Cyan;

    this.chart1.Series.Add(data);
    this.chart1.Series[1].Name = "名前変更";
}

今度はX軸に文字列を設定します。
ひとまず、デフォルトのSeriesは不要なので、プロパティの設定から削除してみます。
削除後、プログラムを書き換えます。

private void Form1_Load(object sender, EventArgs e)
{
    Series data = new Series();
    data.Points.AddXY("太郎", 10);
    data.Points.AddXY("次郎", 20);
    data.Points.AddXY("三郎", 30);
    data.Points.AddXY("四郎", 40);
    data.Points.AddXY("五郎", 50);

    this.chart1.Series.Add(data);
}

グラフに値を表示させてみます。

private void Form1_Load(object sender, EventArgs e)
{
    Series data = new Series();
    data.Points.AddXY("太郎", 10);
    data.Points.AddXY("次郎", 20);
    data.Points.AddXY("三郎", 30);
    data.Points.AddXY("四郎", 40);
    data.Points.AddXY("五郎", 50);
    data.IsValueShownAsLabel = true;

    this.chart1.Series.Add(data);
}

グラフの縦線はいまいち美しくないですねぇ。
消してみます。

private void Form1_Load(object sender, EventArgs e)
{
    Series data = new Series();
    data.Points.AddXY("太郎", 10);
    data.Points.AddXY("次郎", 20);
    data.Points.AddXY("三郎", 30);
    data.Points.AddXY("四郎", 40);
    data.Points.AddXY("五郎", 50);
    
    data.IsValueShownAsLabel = true;

    this.chart1.Series.Add(data);
    this.chart1.ChartAreas[0].AxisX.MajorGrid.Enabled = false;
}

少しすっきりしました。
せっかくなら、原点にある縦の線も消したいですね。

private void Form1_Load(object sender, EventArgs e)
{
    Series data = new Series();
    data.Points.AddXY("太郎", 10);
    data.Points.AddXY("次郎", 20);
    data.Points.AddXY("三郎", 30);
    data.Points.AddXY("四郎", 40);
    data.Points.AddXY("五郎", 50);
    
    data.IsValueShownAsLabel = true;

    this.chart1.Series.Add(data);
    this.chart1.ChartAreas[0].AxisX.MajorGrid.Enabled = false;
    this.chart1.ChartAreas[0].AxisY.LineColor = Color.White;
}

原点の軸を変えるならAxisY.LineColorってのが使えるのかな？


これだと、Y軸の原点の線が白なんで横軸と交わるとこが白くなって美しくないですね。
これじゃだめですね。

太さのプロパティを０にしてみます。

private void Form1_Load(object sender, EventArgs e)
{
    Series data = new Series();
    data.Points.AddXY("太郎", 10);
    data.Points.AddXY("次郎", 20);
    data.Points.AddXY("三郎", 30);
    data.Points.AddXY("四郎", 40);
    data.Points.AddXY("五郎", 50);
    
    data.IsValueShownAsLabel = true;

    this.chart1.Series.Add(data);
    this.chart1.ChartAreas[0].AxisX.MajorGrid.Enabled = false;
    this.chart1.ChartAreas[0].AxisY.LineWidth = 0;
}

最後に名前が長いと収まり悪いので、90度回転して表示します。

private void Form1_Load(object sender, EventArgs e)
{
    Series data = new Series();
    data.Points.AddXY("太郎", 10);
    data.Points.AddXY("次郎", 20);
    data.Points.AddXY("三郎", 30);
    data.Points.AddXY("四郎", 40);
    data.Points.AddXY("五郎", 50);
    
    data.IsValueShownAsLabel = true;

    this.chart1.Series.Add(data);
    this.chart1.ChartAreas[0].AxisX.MajorGrid.Enabled = false;
    this.chart1.ChartAreas[0].AxisY.LineWidth = 0;
    this.chart1.ChartAreas[0].AxisX.LabelStyle.Angle = -90; //-90~90
}

今回登場しなかったプロパティも含めまとめ。

■グラフについて(棒グラフで説明します)
Series 変数 = new Series(); でグラフやデータの情報を保持しています。
変数.Points.AddXY("XValue", "YValue"); で、データを追加できます。

※他のグラフは・・・
変数.ChartType = SeriesChartType.Bar のようにSeriesChartType列挙体を指定すればよいです。
<

メンバー名	説明
Area	面グラフ。
Bar	横棒グラフ。
BoxPlot	ボックス プロット グラフ。
Bubble	バブル チャート。
Candlestick	ローソク足チャート。
Column	縦棒グラフ。
Doughnut	ドーナツ グラフ。
ErrorBar	誤差範囲グラフ。
FastLine	FastLine グラフ。
FastPoint	FastPoint グラフ。
Funnel	じょうごグラフ。
Kagi	かぎ足チャート。
Line	折れ線グラフ。
Pie	円グラフ。
Point	ポイント グラフ。
PointAndFigure	PointAndFigure グラフ。
Polar	極座標グラフ。
Pyramid	ピラミッド グラフ。
Radar	レーダー チャート。
Range	範囲グラフ。
RangeBar	RangeBar グラフ。
RangeColumn	範囲縦棒グラフ。
Renko	練行足チャート。
Spline	スプライン グラフ。
SplineArea	スプライン面グラフ。
SplineRange	スプライン範囲グラフ。
StackedArea	積み上げ面グラフ。
StackedArea100	100% 積み上げ面グラフ。
StackedBar	積み上げ横棒グラフ。
StackedBar100	100% 積み上げ横棒グラフ。
StackedColumn	積み上げ縦棒グラフ。
StackedColumn100	100% 積み上げ縦棒グラフ。
StepLine	StepLine グラフ。
Stock	株価チャート。
ThreeLineBreak	ThreeLineBreak グラフ。

■X軸
this.chart1.ChartAreas[0].AxisX.Enabled = AxisEnabled.False; //ラベル非表示
this.chart1.ChartAreas[0].AxisX.MajorGrid.Enabled = false; //主目盛りを非表示
this.chart1.ChartAreas[0].AxisX.MajorGrid.Interval = 10; //主目盛りの間隔
this.chart1.ChartAreas[0].AxisX.MajorGrid.IntervalOffset = 10; //主目盛りのオフセット値
this.chart1.ChartAreas[0].AxisX.MajorGrid.Color = Color.Blue; //主目盛りの色

this.chart1.ChartAreas[0].AxisX.MinorGrid.Enabled = true; //補助目盛りを表示
this.chart1.ChartAreas[0].AxisX.MinorGrid.Interval = 10; //補助目盛りの間隔
this.chart1.ChartAreas[0].AxisX.MinorGrid.IntervalOffset = 10; //補助目盛りのオフセット値


後で追加する・・・