Chartコントロールでラベルやグラフの設定

VisualStudioのChartコントロール

あまり有名ではないけど、とても便利で簡単なのでC#での使い方を備忘録。
とりあえず自分がやったグラフだけ書きますが
細かい設定まで書いているので参考にしてください。

コントロールの貼り付け

「ツールボックス」「データ」の中にあるチャートをドラッグドロップ

 

チャートの初期化

//初期化
chart1.Series.Clear();

//X軸最小値、最大値、目盛間隔の設定
chart1.ChartAreas[0].AxisX.Minimum = 0;
chart1.ChartAreas[0].AxisX.Maximum = 20;
chart1.ChartAreas[0].AxisX.Interval = 5;

//Y軸最小値、最大値、目盛間隔の設定
chart1.ChartAreas[0].AxisY.Minimum = 0;
chart1.ChartAreas[0].AxisY.Maximum = 50;
chart1.ChartAreas[0].AxisY.Interval = 10;

//背景色
chart1.ChartAreas[0].BackColor = Color.FromArgb(255,200,200,200);

//中の罫線を点線にと色
chart1.ChartAreas[0].AxisX.MajorGrid.LineColor = Color.HotPink;
chart1.ChartAreas[0].AxisX.MajorGrid.LineDashStyle = ChartDashStyle.Dot;
chart1.ChartAreas[0].AxisY.MajorGrid.LineColor = Color.Brown;
chart1.ChartAreas[0].AxisY.MajorGrid.LineDashStyle = ChartDashStyle.Dot;

折れ線グラフの書き方

例:「全国」という名前の青くてちょっと太い線のy=5x+10なグラフ

Series series_all = new Series(“全国”);
{
for (int i = 0; i < 50; i++)
{
int x = i;
int y = (5 * x) + 10;

series_all.Points.AddXY(x, y);
}
series_all.ChartType = SeriesChartType.Line;//グラフの種類
series_all.Color = Color.Blue;//線の色
series_all.BorderWidth = 3;//線の幅
series_all.IsValueShownAsLabel = false;//ポイントごとの値を表示しない
}
chart1.Series.Add(series_all);

 

 

 

分布図の書き方

なんのグラフなんだか…(-_-;)

string[] ary_tdfk = { “北海道”, “青森”, “岩手”, “秋田”, “山形”, “福島” };
double[] ary_y ={ 20.5, 10, 12.8, 7, 25.2, 9 };
long[] ary_x={ 15, 8, 4, 10, 7, 5};

//分布図
Series series_spraying = new Series(“散布図”);
{
//描画形式の設定
series_spraying.MarkerSize = 10;//点の大きさ
series_spraying.MarkerStyle = System.Windows.Forms.DataVisualization.Charting.MarkerStyle.Diamond; //点の形
series_spraying.ChartType = SeriesChartType.Point;//グラフのスタイル
series_spraying.Font = new Font(“Arial”, 8);//文字フォントとサイズ
series_spraying.Name = “散布図”;

//描画
for (int i = 0; i < ary_tdfk.Length; i++)
{
DataPoint dp = new DataPoint(ary_x[i], ary_y[i]);
dp.Label = ary_tdfk[i];
series_spraying.Points.Add(dp);
}
}
chart1.Series.Add(series_spraying);

ラベルのカスタマイズ

chart1.Series[“散布図”].LabelBackColor = Color.LightYellow;//ラベルの背景色
chart1.Series[“散布図”].CustomProperties = “LabelStyle=BottomRight”;//ラベルの位置
chart1.Series[“散布図”].Color = Color.Aqua;//ポイントの色

 

 

ラベルが重なってもいい、または重ねない

上のラベルはラベルを重ねない状態です。

密集した場所だと→とか自動で出るので結構便利ですが逆に分かりにくい場合は重なってもいいからという場合は

chart1.Series[“散布図”].SmartLabelStyle.Enabled = false;//ラベルの自動移動

 

凡例の削除

ちょっと場所を取りすぎるので邪魔ですよね

//凡例の非表示
for (int i = 0; i < chart1.Series.Count; i++)
{
chart1.Series[i].IsVisibleInLegend = false;
chart1.Series[i].IsValueShownAsLabel = false;
}

 

チャートをクリックしたときに値を表示

private void chart1_Click(object sender, EventArgs e)
{
HitTestResult result;
result = this.chart1.HitTest(((MouseEventArgs)e).X, ((MouseEventArgs)e).Y);
if (result.ChartElementType == ChartElementType.DataPoint)
{
DataPoint dp = result.Series.Points[result.PointIndex];
label1.Text = “エリア:” + dp.Label + “ X=” + dp.XValue.ToString() + “ Y=” + dp.YValues[0].ToString();
}

}

  ↓

「山形」の点をクリックすると「label1」に内容を書き出します

  ↓

 

複数グラフがあるときに特定のグラフの時だけ値を表示

上のままだと直線をクリックしたときに値が出てしまいます。
これを都道府県名の時だけ表示にします。

 

private void chart1_Click(object sender, EventArgs e)
{
label1.Text = “”;

HitTestResult result;
result = this.chart1.HitTest(((MouseEventArgs)e).X, ((MouseEventArgs)e).Y);
if (result.ChartElementType == ChartElementType.DataPoint)
{
if (result.Series.Name == “散布図”)
{
DataPoint dp = result.Series.Points[result.PointIndex];
label1.Text = “エリア:” + dp.Label + “ X=” + dp.XValue.ToString() + “ Y=” + dp.YValues[0].ToString();
}
else
{
label1.Text = “”;
}
}
}

 

chartコントロールを使わない場合

Chartコントロールを使わない場合はPictureboxもしくはFormに書きます。

下に進むとY軸は+され、右に進むとX軸が+されるので
グラフの(0,0)の位置を決定してから
計算して出た値のポイントまでラインを書いていきます。

 

 

Chartコントロールの感想

昔はねぇ…こういう便利なのがなかったから大変でした。
いろいろなグラフをきれいにかけるので是非とも活用してほしいと思います。

特にこのグラフのすごい点はchartのアンカーを4方位に設定して
ウィンドウを拡縮したときに同じようにchartコントロームが拡縮したときに
スムーズに描画がされる点です。

 

 

コメントを残す