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

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

FlexRadar の使用をすぐに開始し、アプリケーション実行時にどのように表示されるかを確認するには、次の手順に従います。

  1. アプリケーションへの FlexRadar の追加
  2. データソースへの FlexRadar の連結
  3. アプリケーションの実行

次の図に、上記の手順を完了した後に、基本的な FlexRadar がどのように表示されるかを示します。

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

  1. Visual Studio で UWP アプリケーションを作成します。
  2. C1FlexRadar コントロールをツールボックスから MainPage にドラッグアンドドロップします。
    次の .dll ファイルが自動的にアプリケーションに追加されます。
    • C1.UWP.dll
    • C1.UWP.DX.dll
    • C1.UWP.FlexChart.dll

    <Grid></Grid> タグ内の XAML マークアップは次のコードのようになります。
    <Chart:C1FlexRadar HorizontalAlignment="Left" 
                   Height="100" 
                   Margin="0" 
                   VerticalAlignment="Top" 
                   Width="100"/>

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

この手順では、まず、ある年の連続する 3 か月間の果物の売上データを生成する DataCreator クラスを作成します。次に、FlexChartBase クラスで提供される ItemsSource プロパティを使用して、作成したデータソースに FlexRadar を連結します。さらに、FlexRadar の X 値を含むフィールドと Y 値を含むフィールドを、それぞれ BindingX プロパティと Binding プロパティを使用して指定します。

  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),
                .Size = rnd.[Next](5)
            })
        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
    Public Property Size() As Integer
        Get
            Return m_Size
        End Get
        Set
            m_Size = Value
        End Set
    End Property
    Private m_Size As Integer
End Class
Public Class DataPoint
    Public Property XVals() As Double
        Get
            Return m_XVals
        End Get
        Set
            m_XVals = Value
        End Set
    End Property
    Private m_XVals As Double
    Public Property YVals() As Double
        Get
            Return m_YVals
        End Get
        Set
            m_YVals = Value
        End Set
    End Property
    Private m_YVals As Double
End Class

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

namespace FlexRadarQuickStart
{
    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. XAML マークアップを編集して、FlexRadar にデータを提供します。

        <Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FlexRadarQuickStart"
    xmlns:Chart="using:C1.Xaml.Chart"
    x:Class="FlexRadarQuickStart.MainPage"
    DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}">

    <Grid>
        <Chart:C1FlexRadar ItemsSource="{Binding DataContext.Data}" 
                           BindingX="Fruit" 
                           Margin="0,220,20,130">
            <Chart:C1FlexRadar.Series>
                <Chart:Series SeriesName="3月" 
                              Binding="March"></Chart:Series>
                <Chart:Series SeriesName="4月" 
                              Binding="April"></Chart:Series>
                <Chart:Series SeriesName="5月" 
                              Binding="May"></Chart:Series>
            </Chart:C1FlexRadar.Series>
        </Chart:C1FlexRadar>
    </Grid>

</Page>
           
  3. コードビューに切り替えて、次のコードを追加します。
    Partial Public NotInheritable Class MainPage
    Inherits Page
    Private _fruits As List(Of FruitDataItem)

    Public Sub New()
        Me.InitializeComponent()
    End Sub

    Public ReadOnly Property Data() As List(Of FruitDataItem)
        Get
            If _fruits Is Nothing Then
                _fruits = DataCreator.CreateFruit()
            End If

            Return _fruits
        End Get
    End Property
End Class

    using System.Collections.Generic;
using Windows.UI.Xaml.Controls;

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

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

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

                return _fruits;
            }
        }
    }
}

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

［F5］キーを押してアプリケーションを実行し、出力を確認します。

 

 

Copyright © MESCIUS, Inc. All rights reserved.