面グラフは、折れ線グラフと軸の間の領域が単色で塗りつぶされているか網掛けされている折れ線グラフです。ただし、折れ線グラフは、表示するデータ値が単に傾向を表すのに対して、面グラフは、塗りつぶされた部分がその傾向の程度を伝えます。面グラフは、各カテゴリの傾向を単純に比較して分析するためにも使用されます。たとえば、面グラフは、インターネットが徐々に新聞に代わってニュースを入手するための情報源になっていく状況を容易に描写できます。

スプライン面グラフと階段面グラフは面グラフの一種で、スプライングラフまたは階段グラフと軸の間の領域が単色で塗りつぶされているか網掛けされ、変化の程度を示します。スプライングラフと階段グラフの詳細については、折れ線グラフを参照してください。

面グラフ	スプライン面グラフ	階段面グラフ

WinForms 面グラフの作成

これらのチャートは、FlexChart クラスにある ChartType プロパティを次の表に示すように設定することによって作成できます。このプロパティは、C1.Chart 名前空間の ChartType 列挙に含まれる値を受け取ります。

FlexChart には、面グラフを積み上げるオプションもあります。積層または 100% 積層面グラフを実現するには、FlexChart クラスの Stacking プロパティをそれぞれ Stacked または Stacked100pc に設定します。このプロパティは、C1.Chart 名前空間の Stacking 列挙に含まれる値を受け取ります。積層グラフはカテゴリの累計値を示し、部分と全体の関係を示すために使用されます。一方、100% 積層グラフは値が占める割合を示すために使用されます。

積層エリアグラフ	100% 積層面グラフ

FlexChart を使用して面グラフを作成するには

設計時

フォームで FlexChart コントロールを右クリックして［プロパティ］ウィンドウを開きます。
ChartType プロパティに移動して、その値を「Area」に設定します。
DataSource プロパティを使用してデータソースを設定します。
BindingX および Binding プロパティを設定して、X 軸と Y 軸の値をそれぞれ構成します。

コードの使用

WinForms 面グラフをコードで作成するには、コントロールを初期化した後に、最初にデフォルトの系列をクリアし、Add メソッドを使用して新しい系列を追加します。DataSource プロパティを使用してデータソースを設定し、BindingX および Binding プロパティを設定して X 軸と Y 軸を構成します。また、ChartType などの必要なプロパティを使用して、チャートを設定する必要があります。

C#
VB.NET

this.flexChart1.Series.Clear();

// チャートタイプを面に設定します
this.flexChart1.ChartType = ChartType.Area;

// チャートのヘッダーを設定します
this.flexChart1.Header.Content = "Newspapers Losing Relevance as News Source";

// データをFlexChartに渡します
this.flexChart1.DataSource = GetNewsSourcesInfo();

// チャートのX軸を「Year」にバインドして、年が横軸に表示されるようにします
this.flexChart1.BindingX = "Year";

// FlexChartで2つの系列（新聞とインターネットという系列）を作成します
this.flexChart1.Series.Add(new Series { Name = "Newspaper", Binding = "Newspaper" });
this.flexChart1.Series.Add(new Series { Name = "Internet", Binding = "Internet" });

Me.flexChart1.Series.Clear()

' チャートタイプを面に設定します
Me.flexChart1.ChartType = ChartType.Area

' チャートのヘッダーを設定します
Me.flexChart1.Header.Content = "Newspapers Losing Relevance as News Source"

' データをFlexChartに渡します
Me.flexChart1.DataSource = GetNewsSourcesInfo()

' チャートのX軸を「Year」にバインドして、年が横軸に表示されるようにします
Me.flexChart1.BindingX = "Year"

' FlexChartで2つの系列（新聞とインターネットという系列）を作成します
Me.flexChart1.Series.Add(New Series() With {
     .Name = "Newspaper",
      .Binding = "Newspaper"
})
Me.flexChart1.Series.Add(New Series() With {
      .Name = "Internet",
      .Binding = "Internet"
})

上記のサンプルコードは、GetNewsSourcesInfo という名前のカスタムメソッドを使用してチャートにデータを提供しています。要件に基づいてデータソースを設定できます。

C#
VB.NET

    /// <summary>
    /// FlexChartのデータを作成するメソッド
    /// </summary>
    Random rnd = new Random();
public List<Object> GetNewsSourcesInfo()
{
    var data = new List<Object>();
    for (int year = 2000; year <= 2017; year++)
    {
        var count = year - 1999;
        data.Add(new
        {
            Year = year,
            TV = rnd.Next(71 - count / 2, 71 + count / 2) / 100f,
            Newspaper = rnd.Next(40 - count / 3, 40 - count / 3 + 10) / 100f,
            Radio = rnd.Next(30 - count, 30 - count + 3) / 100f,
            Internet = rnd.Next(count * 3, count * 3 + 10) / 100f,
        });
    }
    return data;
}

''' <summary>
'''  FlexChartのデータを作成するメソッド
''' </summary>
Private rnd As New Random()
Public Function GetNewsSourcesInfo() As List(Of [Object])
    Dim data As List(Of [Object]) = New List(Of [Object])()
    For year As Integer = 2000 To 2017
        Dim count As Integer = year - 1999
        data.Add(New With {
              .Year = year,
              .TV = rnd.[Next](71 - count \ 2, 71 + count \ 2) / 100.0F,
              .Newspaper = rnd.[Next](40 - count \ 3, 40 - count \ 3 + 10) / 100.0F,
              .Radio = rnd.[Next](30 - count, 30 - count + 3) / 100.0F,
              .Internet = rnd.[Next](count * 3, count * 3 + 10) / 100.0F
        })
    Next
    Return data
End Function