データソースを使用したデータの連結

データを連結するということは、1 つ以上のデータコンシューマーをデータプロバイダに同期して接続するということです。データが連結されると、グラフは、連結されたすべてのデータを指定された系列のデータソースとして使用し、系列とグラフプロパティに従ってデータをグラフ面上に表現します。

データソースの内容と実際のグラフの間には少し距離があるため、データを集約しないとプロットできないことがよくあります。ただし、プロットするデータが既にデータビューや別のデータソースオブジェクトとして用意されていることもあります。その場合は、グラフを直接データソースオブジェクトに連結できます。

FlexChart コントロールをデータソースに連結するには、まず ItemsSource プロパティをデータソースオブジェクトに設定する必要があります。次に、グラフの各系列をデータソースオブジェクト内のフィールドに連結する必要があります。それには、BindingX プロパティと Binding プロパティを使用します。

連結ソースを指定するには、DataContext = "{Binding RelativeSource={RelativeSource Mode=Self}}" マークアップを MainPage.xaml ファイルの <Page> タグに追加する必要があります。

データ連結を実装する完全な機能を備えたプログラムを示すコードは次のとおりです。このコードは、DataCreator.cs クラスを使用してグラフのデータを生成します。

XAML
Code

Tab Caption

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Data_Binding"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Chart="using:C1.Xaml.Chart" xmlns:Foundation="using:Windows.Foundation"
    x:Class="Data_Binding.MainPage"
    DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Chart:C1FlexChart x:Name="flexChart" BindingX="Fruit" 
        ItemsSource="{Binding DataContext.Data}" ChartType="Bar">
            <Chart:C1FlexChart.Series>
                <Chart:Series SeriesName="三月" Binding="March"/>
                <Chart:Series SeriesName="四月" Binding="April"/>
                <Chart:Series SeriesName="五月" Binding="May"/>
            </Chart:C1FlexChart.Series>
        </Chart:C1FlexChart>

    </Grid>
</Page>

DataCreator.cs	コードのコピー
class DataCreator { public static List<FruitDataItem> CreateFruit() { var fruits = new string[] { "蜜柑", "林檎", "梨", "バナナ" }; var count = fruits.Length; var result = new List<FruitDataItem>(); var rnd = new Random(); for (var i = 0; i < count; i++) result.Add(new FruitDataItem() { Fruit = fruits[i], March = rnd.Next(20), April = rnd.Next(20), May = rnd.Next(20), }); return result; } } public class FruitDataItem { public string Fruit { get; set; } public double March { get; set; } public double April { get; set; } public double May { get; set; } } public class DataPoint { public double XVals { get; set; } public double YVals { get; set; } }

DataCreator.cs

コードのコピー

    class DataCreator
    {
        public static List<FruitDataItem> CreateFruit()
        {
var fruits = new string[] { "蜜柑", "林檎", "梨", "バナナ" };
            var count = fruits.Length;
            var result = new List<FruitDataItem>();
            var rnd = new Random();
            for (var i = 0; i < count; i++)
                result.Add(new FruitDataItem()
                {
                    Fruit = fruits[i],
                    March = rnd.Next(20),
                    April = rnd.Next(20),
                    May = rnd.Next(20),
                });
            return result;
        }

    }
    public class FruitDataItem
    {
        public string Fruit { get; set; }
        public double March { get; set; }
        public double April { get; set; }
        public double May { get; set; }
    }

    public class DataPoint
    {
        public double XVals { get; set; }
        public double YVals { get; set; }
    }

MainWindow.xaml.cs	コードのコピー
public sealed partial class MainPage : Page { private List<FruitDataItem> _fruits; public MainPage() { this.InitializeComponent(); } public List<FruitDataItem> Data { get { if (_fruits == null) { _fruits = DataCreator.CreateFruit(); } return _fruits; } } }

MainWindow.xaml.cs

コードのコピー

public sealed partial class MainPage : Page
{
    private List<FruitDataItem> _fruits;

    public MainPage()
    {
        this.InitializeComponent();

    }

    public List<FruitDataItem> Data
    {
        get
        {
            if (_fruits == null)
            {
                _fruits = DataCreator.CreateFruit();
            }

            return _fruits;
        }
    }
}

コードを実行すると、次の出力が表示されます。