2015年11月21日土曜日

棒グラフ

データの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誤差範囲グラフ。
FastLineFastLine グラフ。
FastPointFastPoint グラフ。
Funnelじょうごグラフ。
Kagiかぎ足チャート。
Line折れ線グラフ。
Pie円グラフ。
Pointポイント グラフ。
PointAndFigurePointAndFigure グラフ。
Polar極座標グラフ。
Pyramidピラミッド グラフ。
Radarレーダー チャート。
Range範囲グラフ。
RangeBarRangeBar グラフ。
RangeColumn範囲縦棒グラフ。
Renko練行足チャート。
Splineスプライン グラフ。
SplineAreaスプライン面グラフ。
SplineRangeスプライン範囲グラフ。
StackedArea積み上げ面グラフ。
StackedArea100100% 積み上げ面グラフ。
StackedBar積み上げ横棒グラフ。
StackedBar100100% 積み上げ横棒グラフ。
StackedColumn積み上げ縦棒グラフ。
StackedColumn100100% 積み上げ縦棒グラフ。
StepLineStepLine グラフ。
Stock株価チャート。
ThreeLineBreakThreeLineBreak グラフ。


■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; //補助目盛りのオフセット値


後で追加する・・・
投稿者 時刻:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)