複合チャートは、複数のチャートタイプを組み合わせて 1 つのプロット領域に表示します。たとえば、棒グラフと折れ線グラフを 1 つのプロット内に配置します。複合チャートは、実績値と目標値、総売上と総利益、温度と降水量など、互いに関連がある異なるデータセットの比較に最適です。このチャートには、さまざまな値の目盛りに対応するために複数の軸が必要になることに注意してください。複数軸の詳細については、軸を参照してください。

WinForms 複合チャート

WinForms 複合チャートの作成

FlexChart では、系列ごとにチャートタイプを指定して複合チャートを作成します。これを実現するには、SeriesBase クラスにある ChartType プロパティを設定します。このプロパティを設定すると、チャートで設定されている ChartType プロパティがオーバーライドされます。

FlexChart を使用して複合チャートを作成するには

設計時

フォームで FlexChart コントロールを右クリックして［プロパティ］ウィンドウを開きます。
DataSource プロパティと BindingX プロパティの値を設定します。
Series フィールドに移動し、省略符ボタンをクリックして 系列コレクションエディタを開きます。
系列コレクションエディタで、［系列 1］をクリックして Binding および ChartType プロパティを設定します。
［追加］ボタンをクリックして、新しい系列として［系列 2］を追加します。
系列 2 の Binding プロパティと ChartType プロパティを設定します。

コードの使用

WinForms 複合チャートをコードで作成するには、コントロールを初期化した後に、最初にデフォルトの系列をクリアします。 DataSource プロパティを使用してデータソースを設定し、BindingX プロパティを設定して X 軸を構成します。ここで、Add メソッドを使用して新しい系列を追加し、その Binding および ChartType プロパティを設定します。同様に、別の系列を Series コレクションに追加し、ChartType、Binding などのプロパティを必要に応じて設定します。

C#
VB.NET

// チャートのヘッダーを設定します
this.flexChart1.Header.Content = "Weather Report : Temperature vs Precipitation";

// データをFlexChartに渡します
this.flexChart1.DataSource = GetTemperatureData(30).First().Data;

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

// FlexChartで系列を作成して追加します
var temp = new Series
{
    Name = "Temperature",
    Binding = "HighTemp",
};
this.flexChart1.Series.Add(temp);

// FlexChartで系列を作成して、ChartTypeを設定します
var precip = new Series
{
    Name = "Precipitation",
    Binding = "Precipitation",
    ChartType = ChartType.LineSymbols,
    AxisY = new Axis { Title = "Precipitation (mm)", Position = Position.Right, Min = 0 },
};
this.flexChart1.Series.Add(precip);

' チャートのヘッダーを設定します
Me.flexChart1.Header.Content = "Weather Report : Temperature vs Precipitation"

' データをFlexChartに渡します
Me.flexChart1.DataSource = GetTemperatureData(30).First().Data

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

' FlexChartで系列を作成して追加します
Dim temp As Series = New Series() With {
      .Name = "Temperature",
      .Binding = "HighTemp"
}
Me.flexChart1.Series.Add(temp)

' FlexChartで系列を作成して、ChartTypeを設定します
Dim precip As Series = New Series() With {
      .Name = "Precipitation",
      .Binding = "Precipitation",
      .ChartType = ChartType.LineSymbols,
      .AxisY = New Axis() With {
          .Title = "Precipitation (mm)",
          .Position = Position.Right,
          .Min = 0
    }
}
Me.flexChart1.Series.Add(precip)

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

C#
VB.NET

/// <summary>
/// FlexChartのデータを作成するメソッド
/// </summary>
Random rnd = new Random();
public List<CityDataItem> GetTemperatureData(int count = 30)
{
    var data = new List<CityDataItem>();
    var startDate = new DateTime(2017, 1, 1);

    var dataItem = new CityDataItem();
    for (int i = 0; i < count; i++)
    {
        var temp = new Temperature();
        DateTime date = startDate.AddDays(i);
        temp.Date = date;
        if (date.Month <= 8)
            temp.HighTemp = rnd.Next(10, 20);
        else
            temp.HighTemp = rnd.Next(5, 10);
        temp.LowTemp = temp.HighTemp - rnd.Next(6, 8);
        temp.Precipitation = ((date.Month < 4 || date.Month > 8) ? rnd.Next(100, 150) : rnd.Next(150, 200)) + 50;
        dataItem.Data.Add(temp);
    }
    data.Add(dataItem);
    return data;
}

''' <summary>
''' FlexChartのデータを作成するメソッド
''' </summary>
Private rnd As New Random()
Public Function GetTemperatureData(Optional count As Integer = 30) As List(Of CityDataItem)
    Dim data As List(Of CityDataItem) = New List(Of CityDataItem)()
    Dim startDate As DateTime = New DateTime(2017, 1, 1)

    Dim dataItem As CityDataItem = New CityDataItem()
    For i As Integer = 0 To count - 1
        Dim temp As Temperature = New Temperature()
        Dim [date] As DateTime = startDate.AddDays(i)
        temp.[Date] = [date]
        If [date].Month <= 8 Then
            temp.HighTemp = rnd.[Next](10, 20)
        Else
            temp.HighTemp = rnd.[Next](5, 10)
        End If
        temp.LowTemp = temp.HighTemp - rnd.[Next](6, 8)
        temp.Precipitation = (If(([date].Month < 4 OrElse [date].Month > 8), rnd.[Next](100, 150), rnd.[Next](150, 200))) + 50
        dataItem.Data.Add(temp)
    Next
    data.Add(dataItem)
    Return data
End Function