memo

プログラミング備忘録

【C#】Chart棒グラフ

Visual C#で棒グラフ作成について、備忘録としてメモ。

todo
1本の棒グラフで温度計のようなものを作成してみます。

完成図
f:id:shinopikapi:20181202223130p:plain


デザイナ画面で色々設定できるようですが、
私はコーディングで設定したい(そうじゃないと、設定し忘れとかあって面倒かなと思った)人なので、
基本的にコーディングで設定していきます。


手順
ツールボックスからChartをデザイン画面に引っ張ってくる。
名前は初期のまま chart1 にしています。
初期状態では、Seriesが1つ存在しているので、これをクリアします。

流れとしては
・初期化(クリア)
・Chartの種類、最大値、最小値、目盛り間隔等の設定
・データの設定
とざっくりこんな感じです。

ひとまずこの状態では、

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

            // chart設定
            string Name1 = "Bar1";
            string AreaName1 = "chartArea1";
            chart1.Series.Add(Name1);// Series追加
            chart1.ChartAreas.Add(AreaName1);
            chart1.Series[Name1].ChartType = SeriesChartType.Column;// chart種類:縦棒
            
            // データ設定
            for(int i=0; i<5; i++)
            {
                chart1.Series[Name1].Points.AddXY(i,i*10);
            }

下図のような表示になりました。
f:id:shinopikapi:20181202012919p:plain

SeriesがChart上の一つの数値、折れ線グラフで言えば一つの折れ線。一項目。
ChartAreaはChartの表示範囲のようで、
Chart全体の数値で、最大値、最小値を設定するときはChartAreaに設定すればよさそう………( ^ω^)
最初にこれらを初期化して、自分で新たに名前を設定しなおしています。

縦棒グラフにしたいときはChartTypeをColmn
横棒のときはBar

私の環境では、SeriesChartType.Columnを指定するときに、
using System.Windows.Forms.DataVisualization.Charting;
を追加するよう注意される等しました。

データを設定する場合、Columnではxが横軸、yが縦軸

今回は温度計のような棒1本のグラフを作りたいので、
x軸の数値表示を消し、barを1本にして、
右上に表示されている凡例も消したいと思います。

// 初期化
            chart1.Series.Clear();
            chart1.ChartAreas.Clear();
            chart1.Legends.Clear();// 凡例非表示

            // chart設定
            string Name1 = "Bar1";
            string AreaName1 = "chartArea1";
            chart1.Series.Add(Name1);// Series追加
            chart1.ChartAreas.Add(AreaName1);
            chart1.Series[Name1].ChartType = SeriesChartType.Column;// chart種類:縦棒
            // add x軸目盛数値を非表示
            chart1.ChartAreas[AreaName1].AxisX.LabelStyle.Enabled = false;


            // データ設定
            chart1.Series[Name1].Points.AddXY(0, 10);

上記のように、凡例非表示、x軸の数値非表示にして
デザイナ画面からchartの幅を適当に細くすると、目的である温度計っぽくなってきました。

f:id:shinopikapi:20181202020126p:plain


最小、最大、y軸の目盛間隔を設定して体裁を整えます。
また、背景の縦線も消していき、枠線は残すようにします。

~ ↑と同じ~
            // 最大最小設定
            chart1.ChartAreas[AreaName1].AxisY.Maximum = 50;
            chart1.ChartAreas[AreaName1].AxisY.Minimum = -20;
            chart1.ChartAreas[AreaName1].AxisY.Interval = 10;

            chart1.ChartAreas[AreaName1].AxisX.Interval = 2;

            // 目盛線ちょっと出てるところがなくなる
            chart1.ChartAreas[AreaName1].AxisX.MajorTickMark.Enabled = false;

            // データ設定
            chart1.Series[Name1].Points.AddXY(0, 15);

f:id:shinopikapi:20181202222536p:plain

最小、最大を設定。
(0, 15)とx軸の値は0に指定したけど、実際ラベル表示させてみると1のところに表示しているように見える。
x軸の縦線(真ん中の1のラインから伸びていた線)を消すにはどうしたらいいんだ……
と思いましたが、こちらのサイトを参考にさせていただき、
C# Chart コントロールのサンプルプログラム <1.散布図 , 2.温度計もどき , 3.ロジアナもどき , 4.座標軸 >: enajet
intervalをx軸分(0,1,2となってるから2で設定)にすればとりあえず消えるのがわかりました。
ありがとうございます。

x軸ラベルを非表示に戻して完成

            // add x軸目盛数値を非表示
            chart1.ChartAreas[AreaName1].AxisX.LabelStyle.Enabled = false;

f:id:shinopikapi:20181202223130p:plain