チュートリアル - LightningChart .NET による棒グラフの作成：XLsoft エクセルソフト

このチュートリアルでは、2 つの BarSeries を使用したシンプルな 2D チャートの作成方法を紹介します。BarSeries は、四角形の棒状でデータの値を表現し、データ間の差異や分散を明確に視覚化します。

ここでは、BarSeries を使用して、2 年間の月間平均気温を表示します。

このチュートリアルでは、WPF または Windows Form アプリケーションで作成された新規のチャートを使用します。チャートの作成方法については、「シンプルな 2D (XY) チャート」をご参照ください。

カスタム目盛りを使用した棒グラフを作成するためのソースコードは、下記のボタンからダウンロードできます。

作成手順

BarSeries を新規作成し、系列にスタイルを追加します。
アプリケーションのプラットフォームに合わせ、System.Windows.Media.Color または System.Drawing.Color を使用することで色を定義できます。

1
2
3
4
5
6
7
8
// BarSeries を新規作成
var barSeries1 = new BarSeries(chart.ViewXY, axisX, axisY);

// 作成した系列にスタイルを追加
barSeries1.Fill.Color = Color.FromRgb(255, 165, 0); // Orange.
barSeries1.Fill.GradientFill = GradientFill.Solid;
barSeries1.Title.Text = "2017";
barSeries1.BarThickness = 10;

平均月間気温を示すデータを BarSeriesValues として生成し、BarSeries に追加します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// BarSeriesValues としてデータを生成
BarSeriesValue[] bars1 = new BarSeriesValue[]
{
    new BarSeriesValue(0, -5, null),
    new BarSeriesValue(1, -6, null),
    new BarSeriesValue(2, -2, null),
    new BarSeriesValue(3, 4, null),
    new BarSeriesValue(4, 10, null),
    new BarSeriesValue(5, 14, null),
    new BarSeriesValue(6, 17, null),
    new BarSeriesValue(7, 15, null),
    new BarSeriesValue(8, 10, null),
    new BarSeriesValue(9, 6, null),
    new BarSeriesValue(10, -2, null),
    new BarSeriesValue(11, -4, null)
};

// BarSeriesValues を BarSeries へ追加
barSeries1.Values = bars1;

BarSeries をチャートに追加します。

1
2
// BarSeries チャートに追加
chart.ViewXY.BarSeries.Add(barSeries1);

2 つ目の BarSeries を作成し、系列にスタイルを追加します。

1
2
3
4
5
6
7
8
// 2 つ目の BarSeries を作成
var barSeries2 = new BarSeries();

// 系列にスタイルを追加
barSeries2.Fill.Color = Color.FromRgb(211, 211, 211); // LightGray.
barSeries2.Fill.GradientFill = GradientFill.Solid;
barSeries2.Title.Text = "2018";
barSeries2.BarThickness = 10;

平均月間気温を示すもう 1 つのデータセットを BarSeriesValues として生成し、BarSeries に追加します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
BarSeriesValue[] bars2 = new BarSeriesValue[]
{
    new BarSeriesValue(0, -1, null),
    new BarSeriesValue(1, -1, null),
    new BarSeriesValue(2, 2, null),
    new BarSeriesValue(3, 8, null),
    new BarSeriesValue(4, 15, null),
    new BarSeriesValue(5, 19, null),
    new BarSeriesValue(6, 21, null),
    new BarSeriesValue(7, 19, null),
    new BarSeriesValue(8, 14, null),
    new BarSeriesValue(9, 8, null),
    new BarSeriesValue(10, 2, null),
    new BarSeriesValue(11, -7, null)
};

// BarSeriesValues を BarSeries に追加
barSeries2.Values = bars2;

チャートに BarSeries を追加します。

1
2
// チャートに BarSeries を追加
chart.ViewXY.BarSeries.Add(barSeries2);

LightningChart は、チャート上における棒の表示をカスタムできる BarViewOptions を提供しています。BarViewOptions.Grouping は、値インデックス、幅調整を使用したインデックス、またはロケーション値でチャートに棒グラフを設定できます。

このチュートリアルでは、ByLocation オプションを使用してグループ化を行います。

BarSeries におけるビューのレイアウトを構成します。

1
2
// バーにおけるビューのレイアウトを構成
chart.ViewXY.BarViewOptions.Grouping = BarsGrouping.ByLocation;

LightningChart では、CustomAxisTicks を使用して、独自の目盛りを軸の値として追加できます。

このチュートリアルでは、CustomAxisTicks を使用して、それぞれの月の名前を X 軸の値として表示しています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 月のリストを作成
string[] months = new string[]
{
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December"
};

// CustomAxisTicks を作成して月の名前を X 軸の値として表示
for (int i = 0; i < months.Length; i++)
{
    CustomAxisTick tick = new CustomAxisTick(axisX);
    tick.AxisValue = i;
    tick.LabelText = months[i];
    tick.Color = Color.FromArgb(35, 255, 255, 255);

    axisX.CustomTicks.Add(tick);
}

// カスタムの軸目盛りのセットをチャートに通知
axisX.InvalidateCustomTicks();

注意: カスタムの軸値を正しく表示する場合、AutoFormatLabels プロパティを false に設定し、CustomTicksEnabled プロパティを true に設定する必要があります。

1
2
3
4
5
// ラベルの自動フォーマットを無効化
axisX.AutoFormatLabels = false;

// CustomAxisTicks を有効化
axisX.CustomTicksEnabled = true;

アプリケーションをビルドおよび実行します。

ソースコードをダウンロード

BarSeries を活用した 2D (XY) 棒グラフ

CustomAxisTicks を使用したカスタム目盛りの作成方法

作成手順