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

このチュートリアルでは、複数の AreaSeries を使用して、シンプルな面グラフを作成する方法を紹介します。AreaSeries では、割り当てられたすべてのデータポイントを接続する線があり、それらの線と軸の間の領域が色付けされます。

AreaSeries は、異なるデータの視覚的な比較から、時間の経過にともなう傾向やパターンの視覚化まで、幅広い用途に利用できます。

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

基礎的な面グラフを習得するためのソースコードは、下記のボタンからダウンロードできます。

作成手順

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

// AreaSeries を新規作成
var areaSeries1 = new AreaSeries(chart.ViewXY, axisX, axisY);

// 作成した系列にスタイルを追加
areaSeries1.Fill.Color = Color.FromRgb(176, 196, 222); // LightSteelBlue.
areaSeries1.LineStyle.Color = Color.FromRgb(0, 0, 0); // Black.
areaSeries1.Fill.GradientFill = GradientFill.Solid;

AreaSeriesPoint を定義し、AreaSeries に追加します。

          // AreaSeriesPoint を定義
          AreaSeriesPoint[] points1 = new AreaSeriesPoint[]{
              new AreaSeriesPoint(0, 10),
              new AreaSeriesPoint(1, 8),
              new AreaSeriesPoint(2, 9),
              new AreaSeriesPoint(3, 8),
              new AreaSeriesPoint(4, 7),
              new AreaSeriesPoint(5, 8),
              new AreaSeriesPoint(6, 7),
              new AreaSeriesPoint(7, 9),
              new AreaSeriesPoint(9, 8),
              new AreaSeriesPoint(10, 9)
          };
          
          // 系列に点を追加
          areaSeries1.AddValues(points1);

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

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

新しい AreaSeries を 2 つ作成し、スタイルを追加します。

          // 新しい AreaSeries を 2 つ作成
          var areaSeries2 = new AreaSeries(chart.ViewXY, axisX, axisY);
          var areaSeries3 = new AreaSeries(chart.ViewXY, axisX, axisY);
          
          // 作成した系列にスタイルを追加
          areaSeries2.Fill.Color = Color.FromRgb(250, 250, 210); // LightGoldenrodYellow.
          areaSeries2.LineStyle.Color = Color.FromRgb(0, 0, 0); // Black.
          areaSeries2.Fill.GradientFill = GradientFill.Solid;
          
          areaSeries3.Fill.Color = Color.FromRgb(255, 140, 0); // DarkOrange.
          areaSeries3.LineStyle.Color = Color.FromRgb(0, 0, 0); // Black. 
          areaSeries3.Fill.GradientFill = GradientFill.Solid;

それぞれの新しい AreaSeries 向けに AreaSeriesPoint を定義し、AreaSeries に追加します。

          // 新しい AreaSeries 向けに AreaSeriesPoint を定義
          AreaSeriesPoint[] points2 = new AreaSeriesPoint[]{
              new AreaSeriesPoint(0, 5),
              new AreaSeriesPoint(1, 7),
              new AreaSeriesPoint(3, 5),
              new AreaSeriesPoint(4, 6),
              new AreaSeriesPoint(5, 3),
              new AreaSeriesPoint(6, 5),
              new AreaSeriesPoint(7, 6),
              new AreaSeriesPoint(8, 7),
              new AreaSeriesPoint(9, 5),
              new AreaSeriesPoint(10, 4)
          };
          
          AreaSeriesPoint[] points3 = new AreaSeriesPoint[]{
              new AreaSeriesPoint(0, 1),
              new AreaSeriesPoint(1, 3),
              new AreaSeriesPoint(3, 1),
              new AreaSeriesPoint(4, 3),
              new AreaSeriesPoint(5, 2),
              new AreaSeriesPoint(6, 3),
              new AreaSeriesPoint(7, 2),
              new AreaSeriesPoint(8, 4),
              new AreaSeriesPoint(9, 1),
              new AreaSeriesPoint(10, 2)
          };
          
          // 系列に点を追加
          areaSeries2.AddValues(points2);
          areaSeries3.AddValues(points3);

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

          // チャートに AreaSeries を追加
          view.AreaSeries.Add(areaSeries2);
          view.AreaSeries.Add(areaSeries3);

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

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

AreaSeries を活用した 2D (XY) 面グラフ

基礎的な 2D (XY) 面グラフの作成方法

作成手順