FlexChart for WinForms
連結

連結は、FlexChart とアプリケーションデータ間のリンクを作成する方法を提供します。FlexChart を使用すると、データベースからのデータに加えて、配列やコレクションなどの構造に格納されているデータも連結できます。このトピックでは、チャートにデータを提供する 3 つの方法について説明します。

チャートの連結

チャートの連結は最も簡単な形式の連結です。まず DataSource プロパティによってデータソースを設定し、次にチャートの Y 軸と X 軸にプロットするフィールドに Binding プロパティと BindingX プロパティをマップするだけです。

チャートの連結

// デフォルトの系列をクリアします
this.flexChart1.Series.Clear();

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

// FlexChartのヘッダーを設定します
this.flexChart1.Header.Content = "Tokyo Average Precipitation Report | 2018";

// チャートのX軸を「Date」にバインドします 
this.flexChart1.BindingX = "Date";

// チャートに系列を追加し、データの「Temperature」フィールドにバインドします
this.flexChart1.Series.Add(new Series
{
    // Nameプロパティを使用して、凡例の系列に対応して表示される文字列を指定します
    Name = "Precipitation",
    Binding = "Precipitation"
});

' デフォルトの系列をクリアします
Me.flexChart1.Series.Clear()

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

' FlexChartのヘッダーを設定します
Me.flexChart1.Header.Content = "Tokyo Average Precipitation Report | 2018"

' チャートのX軸を「Date」にバインドします 
Me.flexChart1.BindingX = "Date"

' チャートに系列を追加し、データの「Temperature」フィールドにバインドします
' Nameプロパティを使用して、凡例の系列に対応して表示される文字列を指定します
Me.flexChart1.Series.Add(New Series() With {
     .Name = "Precipitation",
     .Binding = "Precipitation"
})

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

static Random rnd = new Random();
/// <summary>
/// 「Temperature」データを作成する方法
/// </summary>
 // チャートバインディング用のデータソースを作成します
public static List<CityDataItem> GetTemperatureData(string city, int count = 360)
{
    var data = new List<CityDataItem>();
    var startDate = new DateTime(2018, 1, 15);
    var dataItem = new CityDataItem() { Name = city };
    for (int i = 0; i < count;)
    {
        var temp = new Temperature();
        DateTime date = startDate.AddDays(i);
        temp.Date = date;
        temp.Precipitation = (date.Month > 6 && date.Day < 20) ? rnd.Next(45, 80) : rnd.Next(50, 75);
        dataItem.Data.Add(temp);
        i += 31;
    }
    data.Add(dataItem);
    return data;
}

Shared rnd As New Random()
''' <summary>
''' 「Temperature」データを作成する方法
''' </summary>
' チャートバインディング用のデータソースを作成します
Public Shared Function GetTemperatureData(city As String, Optional count As Integer = 360) As List(Of CityDataItem)
    Dim data As List(Of CityDataItem) = New List(Of CityDataItem)()
    Dim startDate As DateTime = New DateTime(2018, 1, 15)
    Dim dataItem As CityDataItem = New CityDataItem() With {
          .Name = city
    }
    Dim i As Integer = 0
    While i < count
        Dim temp As Temperature = New Temperature()
        Dim [date] As DateTime = startDate.AddDays(i)
        temp.[Date] = [date]
        temp.Precipitation = If(([date].Month > 6 AndAlso [date].Day < 20), rnd.[Next](45, 80), rnd.[Next](50, 75))
        dataItem.Data.Add(temp)
        i += 31
    End While
    data.Add(dataItem)
    Return data
End Function

軸の連結

軸の連結とは、軸を別のデータソースに連結して、チャートデータソースにグラフを連結したときに表示される軸ラベルとは異なる軸ラベルをレンダリングすることです。たとえば、上記の例では、チャートデータソースとの連結時に自動的にレンダリングされる Y ラベルを上書きして、降水量を mm 単位で表示できます。FlexChart には DataSource プロパティと Binding プロパティが用意されており、軸を別のデータソースに連結できます。

軸の連結

// データをFlexChartのY軸に渡します
this.flexChart1.AxisY.DataSource = GetAxisBindinglabels();

// Y軸にバインドするフィールドを設定します
this.flexChart1.AxisY.Binding = "Value,Text";

' データをFlexChartのY軸に渡します
Me.flexChart1.AxisY.DataSource = GetAxisBindinglabels()

' Y軸にバインドするフィールドを設定します
Me.flexChart1.AxisY.Binding = "Value,Text"

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

// データソースを作成します
public static List<object> GetAxisBindinglabels()
{
    var data = new List<object>();
    for (double i = 10; i < 250; i += 8)
    {
        data.Add(new { Value = i, Text = i / 100 >= 10 ? string.Format("{0} mm", i / 1000) : string.Format("{0}mm", i) });
    }
    return data;
}

' データソースを作成します
Public Shared Function GetAxisBindinglabels() As List(Of Object)
    Dim data As List(Of Object) = New List(Of Object)()
    For i As Double = 10 To 249 Step 8
        data.Add(New With {
              .Value = i,
              .Text = If(i / 100 >= 10, String.Format("{0} mm", i / 1000), String.Format("{0}mm", i))
        })
    Next
    Return data
End Function

系列の連結

系列の連結では、ある系列を別のデータソースに連結して、元のデータソースにはないデータを表示できます。たとえば、上記 2 つのセクションのサンプルに別の系列を追加して、同じチャートに別のデータソースから取得した平均月間降水量を表示できます。

系列の連結

// X軸のデータを作成します
var monthlyData = GetTemperatureData("Tokyo", 360).First().Data.GroupBy(x => x.Date.Month).SelectMany(grp => grp.Select(val => new
{
    Date = new DateTime(val.Date.Year, grp.Key, 15),
    Value = grp.Average(x => x.Precipitation),
})).Distinct().ToList();

this.flexChart1.Series.Add(new Series
{
    Name = "Monthly Precipitation (Avg)",
    Binding = "Value",
    ChartType = ChartType.LineSymbols,
    DataSource = monthlyData,
});

' X軸のデータを作成します
Dim monthlyData = GetTemperatureData("Tokyo", 360).First().Data.GroupBy(Function(x) x.[Date].Month).SelectMany(Function(grp) grp.[Select](Function(val) New With {
     .[Date] = New DateTime(val.[Date].Year, grp.Key, 15),
     .Value = grp.Average(Function(x) x.Precipitation)
})).Distinct().ToList()

Me.flexChart1.Series.Add(New Series() With {
      .Name = "Monthly Precipitation (Avg)",
      .Binding = "Value",
      .ChartType = ChartType.LineSymbols,
      .DataSource = monthlyData
})

 

 

Copyright © MESCIUS, Inc. All rights reserved.