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

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

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

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

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

1. Visual Studio で WPF アプリケーションを作成します。
2. C1FlexRadar コントロールをツールボックスから MainWindow にドラッグアンドドロップします。
   次の .dll ファイルが自動的にアプリケーションに追加されます。
   
   • C1.WPF.4.dll
   • C1.WPF.DX.4.dll
   • C1.WPF.FlexChart.4.dll
     
     
   <Grid></Grid> タグ内の XAML マークアップは次のコードのようになります。
   
   • XAML

   • XAML

   <c1:C1FlexRadar HorizontalAlignment="Left" 
                   Height="100" 
                   Margin="0" 
                   VerticalAlignment="Top" 
                   Width="100"/>
   

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

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

1. クラス DataCreator を追加し、次のコードを追加します。
   
   • Visual Basic
   • C#

   • Visual Basic

   Class DataCreator
       Public Shared Function CreateData() As List(Of DataItem)
           Dim data = New List(Of DataItem)()
           data.Add(New DataItem("イギリス", 5, 4))
           data.Add(New DataItem("アメリカ", 7, 3))
           data.Add(New DataItem("ドイツ", 8, 5))
           data.Add(New DataItem("日本", 12, 8))
           Return data
       End Function
   End Class
   
   Public Class DataItem
       Public Sub New(country__1 As String, sales__2 As Integer, expenses__3 As Integer)
           Country = country__1
           Sales = sales__2
           Expenses = expenses__3
       End Sub
   
       Public Property Country() As String
           Get
               Return m_Country
           End Get
           Set
               m_Country = Value
           End Set
       End Property
       Private m_Country As String
       Public Property Sales() As Integer
           Get
               Return m_Sales
           End Get
           Set
               m_Sales = Value
           End Set
       End Property
       Private m_Sales As Integer
       Public Property Expenses() As Integer
           Get
               Return m_Expenses
           End Get
           Set
               m_Expenses = Value
           End Set
       End Property
       Private m_Expenses As Integer
   End Class
   

   • C#

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Text;
   using System.Threading.Tasks;
   
   namespace FlexRadarQuickStart
   {
       class DataCreator
       {
           public static List<DataItem> CreateData()
           {
               var data = new List<DataItem>();
               data.Add(new DataItem("イギリス", 5, 4));
               data.Add(new DataItem("アメリカ", 7, 3));
               data.Add(new DataItem("ドイツ", 8, 5));
               data.Add(new DataItem("日本", 12, 8));
               return data;
           }
       }
   
       public class DataItem
       {
           public DataItem(string country, int sales, int expenses)
           {
               Country = country;
               Sales = sales;
               Expenses = expenses;
           }
   
           public string Country { get; set; }
           public int Sales { get; set; }
           public int Expenses { get; set; }
       }
   }
   

2. XAML マークアップを編集して、FlexRadar にデータを提供します。
   
   
   • XAML

   • XAML

       <Window
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           xmlns:local="clr-namespace:FlexRadarQuickStart"
           xmlns:Chart="clr-namespace:C1.WPF.Chart;assembly=C1.WPF.FlexChart.4" 
           x:Class="FlexRadarQuickStart.MainWindow"
           mc:Ignorable="d"
           DataContext = "{Binding RelativeSource={RelativeSource Mode=Self}}">
       
       <Grid>
           <Chart:C1FlexRadar ItemsSource="{Binding DataContext.Data}" 
                              BindingX="Country" 
                              Margin="84,50,216,142">
               <Chart:Series SeriesName="販売" 
                             Binding="Sales"/>
               <Chart:Series SeriesName="費用" 
                             Binding="Expenses" />
           </Chart:C1FlexRadar>
       </Grid>
       
   </Window>
   

          
3. コードビューに切り替えて、次のコードを追加します。
   
   • Visual Basic
   • C#

   • Visual Basic

   Partial Public Class MainWindow
       Inherits Window
       Private _data As List(Of DataItem)
       Public Sub New()
           Me.InitializeComponent()
           Dim flexradar As New C1.WPF.Chart.C1FlexRadar()
       End Sub
   
       Public ReadOnly Property Data() As List(Of DataItem)
           Get
               If _data Is Nothing Then
                   _data = DataCreator.CreateData()
               End If
   
               Return _data
           End Get
       End Property
   End Class
   

   • C#

   using System.Collections.Generic;
   using System.Windows;
   
   namespace FlexRadarQuickStart
   {
       public partial class MainWindow : Window
       {
           private List<DataItem> _data;
           public MainWindow()
           {
               this.InitializeComponent();
           }
   
           public List<DataItem> Data
           {
               get
               {
                   if (_data == null)
                   {
                       _data = DataCreator.CreateData();
                   }
   
                   return _data;
               }
           }
       }
   }
   

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

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