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

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

製品情報チャート一覧

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

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

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


作成手順

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

              // 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;
            
  2. 平均月間気温を示すデータを BarSeriesValues として生成し、BarSeries に追加します。

              // 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;
            
  3. BarSeries をチャートに追加します。

              // BarSeries チャートに追加
              chart.ViewXY.BarSeries.Add(barSeries1);
            
  4. 2 つ目の BarSeries を作成し、系列にスタイルを追加します。

              // 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;
            
  5. 平均月間気温を示すもう 1 つのデータ セットを BarSeriesValues として生成し、BarSeries に追加します。

              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;
            
  6. チャートに BarSeries を追加します。

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

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

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

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

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

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

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

              // 月のリストを作成
              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 に設定する必要があります。

              // ラベルの自動フォーマットを無効化
              axisX.AutoFormatLabels = false;
              
              // CustomAxisTicks を有効化
              axisX.CustomTicksEnabled = true;
            
  8. アプリケーションをビルドおよび実行します。


ライセンス体系、価格、お見積り依頼、ご購入前の技術的なお問い合わせなど、本製品に関するご質問、ご不明な点はエクセルソフトまでお気軽にお問い合わせください。

お問い合わせ


ページトップへ