FlexChart for UWP
手順 2：データソースへの FlexChart の連結
FlexChart > クイックスタート > 手順 2：データソースへの FlexChart の連結

この手順では、チャートをデータソースに連結します。

  1. 次のようにデータソースを作成します。
    1. プロジェクトを右クリックし、［追加］→［クラス］を選択します。
    2. テンプレートの一覧から［クラス］を選択し、「DataCreator.cs」と名前を付け、［追加］をクリックします。
    3. 次のコードを DataCreator.cs クラスに追加してデータを生成します。
      C#
      コードのコピー 
      namespace FlexChartUWPQuickStart
{
    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),
                   Size=rnd.Next(5),
                });
            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 int Size { get; set; }
        }
        public class DataPoint
        {
            public double XVals { get; set; }
            public double YVals { get; set; }
        }
    }
  2. 次のように、データをチャートに連結します。
    1. MainPage.xaml ファイルを開きます。次のマークアップを <Page> タグに追加して連結ソースを指定します。

      XAML
      コードのコピー 
      DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"

    2. <Grid> タグを編集して次のマークアップを作成し、チャートにデータを提供します

      XAML
      コードのコピー 
      <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="-81,0,-361,-56">
         <Grid.RowDefinitions>
             <RowDefinition Height="93*"/>
             <RowDefinition Height="97*"/>
         </Grid.RowDefinitions>
         <Chart:C1FlexChart x:Name="flexChart" HorizontalAlignment="Left" Width="443" ItemsSource="{Binding DataContext.Data}"
                  BindingX="Fruit" Margin="198,18,0,235"
                  Grid.RowSpan="2">
             <Chart:C1FlexChart.Series>
                 <Chart:Series SeriesName="三月" Binding="March"></Chart:Series>
                 <Chart:Series SeriesName="四月" Binding="April"></Chart:Series>
                 <Chart:Series SeriesName="五月" Binding="May"></Chart:Series>
             </Chart:C1FlexChart.Series>
             <Chart:C1FlexChart.AxisX>
                 <Chart:Axis MajorGrid="False" Position="Bottom"></Chart:Axis>
             </Chart:C1FlexChart.AxisX>
             <Chart:C1FlexChart.AxisY>
                 <Chart:Axis AxisLine="False" Position="Left" MajorUnit="5"></Chart:Axis>
             </Chart:C1FlexChart.AxisY>
             <Chart:C1FlexChart.SelectionStyle>
                 <Chart:ChartStyle Stroke="Red"></Chart:ChartStyle>
             </Chart:C1FlexChart.SelectionStyle>
         </Chart:C1FlexChart>
     </Grid>

  3. コードビュー（MainPage.xaml.cs）に切り替えます。次のコードを MainPage クラスに追加して、チャートにデータをプロットします。
       
    MainPage.xaml.cs
    コードのコピー 
    List<FruitDataItem> _fruits;

public MainPage()
{
    this.InitializeComponent();
}

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

        return _fruits;
    }
}

 

 

Copyright © MESCIUS, Inc. All rights reserved.