FlexChart for UWP
クイックスタート
FlexPie > クイックスタート

このクイックスタートでは、Visual Studio で単純な FlexPie アプリケーションを作成して実行する手順を説明します。

次の手順を実行して、アプリケーションの実行時に FlexPie がどのように表示されるかを理解してください。

手順 1：アプリケーションへの FlexPie の追加

  1. Visual Studio で、［空のアプリケーション（ユニバーサル Windows）］を作成します。
  2. C1FlexPie コントロールを MainPage にドラッグアンドドロップします。
    次の dll が自動的にアプリケーションに追加されます。
    C1.UWP.dll
    C1.UWP.DX.dll
    C1.UWP.FlexChart.dll

    <Grid></Grid> タグ内の XAML マークアップは次のコードのようになります。
    <Chart:C1FlexPie x:Name="flexPie" Binding="Value" BindingName="Name" 
HorizontalAlignment="Left" Height="300" VerticalAlignment="Top" Width="300">
    <Chart:C1FlexPie.ItemsSource>
        <Chart:FlexPieSliceCollection>
            <Chart:FlexPieSlice Name="スライス1" Value="1"/>
            <Chart:FlexPieSlice Name="スライス2" Value="2"/>
            <Chart:FlexPieSlice Name="スライス3" Value="3"/>
            <Chart:FlexPieSlice Name="スライス4" Value="4"/>
        </Chart:FlexPieSliceCollection>
    </Chart:C1FlexPie.ItemsSource>
</Chart:C1FlexPie>

手順 2：データソースへの FlexPie の連結

  1. クラス DataCreator を追加し、次のコードを追加します。
    Class DataCreator
    Public Shared Function CreateFruit() As List(Of FruitDataItem)
        Dim fruits = New String() {"蜜柑", "林檎", "梨", "バナナ"}
        Dim count = fruits.Length
        Dim result = New List(Of FruitDataItem)()
        Dim rnd = New Random()
        For i As Object = 0 To count - 1
            result.Add(New FruitDataItem() With {
                .Fruit = fruits(i),
                .March = rnd.[Next](20),
                .April = rnd.[Next](20),
                .May = rnd.[Next](20)
            })
        Next
        Return result
    End Function
End Class

Public Class FruitDataItem
    Public Property Fruit() As String
        Get
            Return m_Fruit
        End Get
        Set
            m_Fruit = Value
        End Set
    End Property
    Private m_Fruit As String
    Public Property March() As Double
        Get
            Return m_March
        End Get
        Set
            m_March = Value
        End Set
    End Property
    Private m_March As Double
    Public Property April() As Double
        Get
            Return m_April
        End Get
        Set
            m_April = Value
        End Set
    End Property
    Private m_April As Double
    Public Property May() As Double
        Get
            Return m_May
        End Get
        Set
            m_May = Value
        End Set
    End Property
    Private m_May As Double
End Class

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace FlexPieQuickStart
{
    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; }
    }
}
  2. <Grid> タグを編集してマークアップを次のように変更し、FlexPie にデータを提供します。

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Chart:C1FlexPie 
        x:Name="flexPie" 
        Binding="April" 
        BindingName="Fruit" 
        ItemsSource="{Binding DataContext.Data}">
        <Chart:C1FlexPie.SelectionStyle>
            <Chart:ChartStyle Stroke="Red" 
                              StrokeThickness="2"/>
        </Chart:C1FlexPie.SelectionStyle>
        <Chart:C1FlexPie.DataLabel>
            <Chart:PieDataLabel Content="{}{y}"/>
        </Chart:C1FlexPie.DataLabel>
    </Chart:C1FlexPie>
</Grid>
    連結ソースを指定するには、DataContext = "{Binding RelativeSource={RelativeSource Mode=Self}}" マークアップを MainPage.xaml ファイルの <Page> タグに追加する必要があります。
  3. コードビュー（MainPage.xaml.cs）に切り替えて、次のコードを該当する名前空間内の MainPage クラスに追加します。
    Partial Public NotInheritable Class MainPage
    Inherits Page
    Private _data As List(Of FruitDataItem)
    Public Sub New()
        Me.InitializeComponent()
    End Sub
    Public ReadOnly Property Data() As List(Of FruitDataItem)
        Get
            If _data Is Nothing Then
                _data = DataCreator.CreateFruit()
            End If
            Return _data
        End Get
    End Property
End Class

    using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

namespace FlexPieQuickStart
{
    public sealed partial class MainPage : Page
    {
        List<FruitDataItem> _data;
        public MainPage()
        {
            this.InitializeComponent();
        }
        public List<FruitDataItem> Data
        {
            get
            {
                if (_data == null)
                {
                    _data = DataCreator.CreateFruit();
                }
                return _data;
            }
        }
    }
}
           

手順 3：アプリケーションの実行

［F5］キーを押してアプリケーションを実行し、次のような出力を確認します.

 

 

 

Copyright © MESCIUS, Inc. All rights reserved.