FlexChart for WPF
クイックスタート
Sunburst > クイックスタート

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

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

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

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

手順 1：アプリケーションへの Sunburst チャートの追加

  1. Visual Studio で WPF アプリケーションを作成します。
  2. C1Sunburst コントロールを MainWindow にドラッグアンドドロップします。
    次の dll が自動的にアプリケーションに追加されます。
    C1.WPF.4.dll
    C1.WPF.DX.4.dll
    C1.WPF.FlexChart.4.dll

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

手順 2：データソースへの Sunburst チャートの連結

この手順では、まず、2013、2014、2015 年の各 4 四半期分（Q1、Q2、Q3、Q4）のランダムな売上データを生成する DataService クラスを作成します。次に、FlexChartBase クラスで提供される ItemsSource プロパティを使用して、作成したクラスに Sunburst を連結します。次に、FlexChartBase および C1FlexPie クラスの Binding および BindingName プロパティを使用して、Sunburst グラフセグメントの数値とラベルをそれぞれ指定します。

  1. クラス DataService を追加し、次のコードを追加します。
    Imports System.Collections.Generic
Imports System.Linq
Imports System.Text
Imports System.Threading.Tasks

Public Class DataService
    Private rnd As New Random()
    Shared _default As DataService

    Public Shared ReadOnly Property Instance() As DataService
        Get
            If _default Is Nothing Then
                _default = New DataService()
            End If

            Return _default
        End Get
    End Property

    Public Shared Function CreateHierarchicalData() As List(Of DataItem)
        Dim rnd As Random = Instance.rnd

        Dim years As New List(Of String)()
        Dim times As New List(Of List(Of String))() From {
            New List(Of String)() From {
                "1月",
                "2月",
                "3月"
            },
            New List(Of String)() From {
                "4月",
                "5月",
                "6月"
            },
            New List(Of String)() From {
                "7月",
                "8月",
                "9月"
            },
            New List(Of String)() From {
                "10月",
                "11月",
                "12月"
            }
        }

        Dim items As New List(Of DataItem)()
        Dim yearLen = Math.Max(CInt(Math.Round(Math.Abs
(5 - Instance.rnd.NextDouble() * 10))), 3)
        Dim currentYear As Integer = DateTime.Now.Year
        For i As Integer = yearLen To 1 Step -1
            years.Add((currentYear - i).ToString())
        Next
        Dim quarterAdded = False

        years.ForEach(
            Function(y)
                Dim i = years.IndexOf(y)
                Dim addQuarter = Instance.rnd.NextDouble() > 0.5
                If Not quarterAdded AndAlso i = years.Count - 1 Then
                    addQuarter = True
                End If
                Dim year = New DataItem() With {
                              .Year = y
                          }
                If addQuarter Then
                    quarterAdded = True
                    times.ForEach(Function(q)
                              Dim addMonth = Instance.rnd.NextDouble() > 0.5
                              Dim idx As Integer = times.IndexOf(q)
                              Dim quar As String = "Q" + (idx + 1).ToString()
                             Dim quarters = New DataItem() With {
                                                    .Year = y,
                                                    .Quarter = quar
                                                }
               If addMonth Then
                              q.ForEach(
                               Function(m)
                                quarters.Items.Add(New DataItem() With {
                                           .Year = y,
                                           .Quarter = quar,
                                           .Month = m,
                                           .Value = rnd.[Next](20, 30)
                                                                  })

                                          End Function)
                                      Else
                                          quarters.Value = rnd.[Next](80, 100)
                                      End If
                                      year.Items.Add(quarters)

                                  End Function)
                Else
                    year.Value = rnd.[Next](80, 100)
                End If
                items.Add(year)

            End Function)

        Return items
    End Function

    Public Shared Function CreateFlatData() As List(Of FlatDataItem)
        Dim rnd As Random = Instance.rnd
        Dim years As New List(Of String)()
        Dim times As New List(Of List(Of String))() From {
            New List(Of String)() From {
                "1月",
                "2月",
                "3月"
            },
            New List(Of String)() From {
                "4月",
                "5月",
                "6月"
            },
            New List(Of String)() From {
                "7月",
                "8月",
                "9月"
            },
            New List(Of String)() From {
                "10月",
                "11月",
                "12月"
            }
        }

        Dim items As New List(Of FlatDataItem)()
        Dim yearLen = Math.Max(CInt(Math.Round(Math.Abs(5 - rnd.NextDouble() * 10))), 3)
        Dim currentYear As Integer = DateTime.Now.Year
        For i As Integer = yearLen To 1 Step -1
            years.Add((currentYear - i).ToString())
        Next
        Dim quarterAdded = False
        years.ForEach(
            Function(y)
                Dim i = years.IndexOf(y)
                Dim addQuarter = rnd.NextDouble() > 0.5
                If Not quarterAdded AndAlso i = years.Count - 1 Then
                    addQuarter = True
                End If
                If addQuarter Then
                    quarterAdded = True
                    times.ForEach(Function(q)
                                      Dim addMonth = rnd.NextDouble() > 0.5
                                      Dim idx As Integer = times.IndexOf(q)
                                      Dim quar As String = "Q" + (idx + 1).ToString()
               If addMonth Then
                    q.ForEach(Function(m)
                             items.Add(New FlatDataItem() With {
                                      .Year = y,
                                      .Quarter = quar,
                                      .Month = m,
                                      .Value = rnd.[Next](30, 40)
                                                                  })

                                                    End Function)
             Else
                 items.Add(New FlatDataItem() With {
                                      .Year = y,
                                      .Quarter = quar,
                                      .Value = rnd.[Next](80, 100)
                                                    })
                                      End If

                                  End Function)
                Else
                    items.Add(New FlatDataItem() With {
                                     .Year = y.ToString(),
                                     .Value = rnd.[Next](80, 100)
                              })
                End If

            End Function)

        Return items
    End Function
End Class

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


namespace SunburstQuickStart
{
    public class DataService
    {
        Random rnd = new Random();
        static DataService _default;

        public static DataService Instance
        {
            get
            {
                if (_default == null)
                {
                    _default = new DataService();
                }

                return _default;
            }
        }

        public static List<DataItem> CreateHierarchicalData()
        {
            Random rnd = Instance.rnd;

            List<string> years = new List<string>();
            List<List<string>> times = new List<List<string>>()
            {
                new List<string>() { "1月", "2月", "3月"},
                new List<string>() { "4月", "5月", "6月"},
                new List<string>() { "7月", "8月", "9月"},
                new List<string>() { "10月", "11月", "12月" }
            };

            List<DataItem> items = new List<DataItem>();
            var yearLen = Math.Max((int)Math.Round(Math.Abs(5 - Instance.rnd.NextDouble() * 10)), 3);
            int currentYear = DateTime.Now.Year;
            for (int i = yearLen; i > 0; i--)
            {
                years.Add((currentYear - i).ToString());
            }
            var quarterAdded = false;

            years.ForEach(y =>
            {
                var i = years.IndexOf(y);
                var addQuarter = Instance.rnd.NextDouble() > 0.5;
                if (!quarterAdded && i == years.Count - 1)
                {
                    addQuarter = true;
                }
                var year = new DataItem() { Year = y };
                if (addQuarter)
                {
                    quarterAdded = true;
                    times.ForEach(q =>
                    {
                        var addMonth = Instance.rnd.NextDouble() > 0.5;
                        int idx = times.IndexOf(q);
                        var quar = "Q" + (idx + 1);
                        var quarters = new DataItem() { Year = y, Quarter = quar };
                        if (addMonth)
                        {
                            q.ForEach(m =>
                            {
                                quarters.Items.Add(new DataItem()
                                {
                                    Year = y,
                                    Quarter = quar,
                                    Month = m,
                                    Value = rnd.Next(20, 30)
                                });
                            });
                        }
                        else
                        {
                            quarters.Value = rnd.Next(80, 100);
                        }
                        year.Items.Add(quarters);
                    });
                }
                else
                {
                    year.Value = rnd.Next(80, 100);
                }
                items.Add(year);
            });

            return items;
        }

        public static List<FlatDataItem> CreateFlatData()
        {
            Random rnd = Instance.rnd;
            List<string> years = new List<string>();
            List<List<string>> times = new List<List<string>>()
            {
                new List<string>() { "1月", "2月", "3月"},
                new List<string>() { "4月", "5月", "6月"},
                new List<string>() { "7月", "8月", "9月"},
                new List<string>() { "10月", "11月", "12月" }
            };

            List<FlatDataItem> items = new List<FlatDataItem>();
            var yearLen = Math.Max((int)Math.Round(Math.Abs(5 - rnd.NextDouble() * 10)), 3);
            int currentYear = DateTime.Now.Year;
            for (int i = yearLen; i > 0; i--)
            {
                years.Add((currentYear - i).ToString());
            }
            var quarterAdded = false;
            years.ForEach(y =>
            {
                var i = years.IndexOf(y);
                var addQuarter = rnd.NextDouble() > 0.5;
                if (!quarterAdded && i == years.Count - 1)
                {
                    addQuarter = true;
                }
                if (addQuarter)
                {
                    quarterAdded = true;
                    times.ForEach(q =>
                    {
                        var addMonth = rnd.NextDouble() > 0.5;
                        int idx = times.IndexOf(q);
                        var quar = "Q" + (idx + 1);
                        if (addMonth)
                        {
                            q.ForEach(m =>
                            {
                                items.Add(new FlatDataItem()
                                {
                                    Year = y,
                                    Quarter = quar,
                                    Month = m,
                                    Value = rnd.Next(30, 40)
                                });
                            });
                        }
                        else
                        {
                            items.Add(new FlatDataItem()
                            {
                                Year = y,
                                Quarter = quar,
                                Value = rnd.Next(80, 100)
                            });
                        }
                    });
                }
                else
                {
                    items.Add(new FlatDataItem()
                    {
                        Year = y.ToString(),
                        Value = rnd.Next(80, 100)
                    });
                }
            });

            return items;
        }
    }
}
  2. クラス SunburstViewModel を追加し、次のコードを追加します。
    Imports C1.Chart
Imports System.Linq
Imports System.Collections.Generic
Public Class SunburstViewModel

    Public ReadOnly Property HierarchicalData() As List(Of DataItem)
        Get
            Return DataService.CreateHierarchicalData()
        End Get
    End Property

    Public ReadOnly Property FlatData() As List(Of FlatDataItem)
        Get
            Return DataService.CreateFlatData()
        End Get
    End Property

    Public ReadOnly Property Positions() As List(Of String)
        Get
            Return [Enum].GetNames(GetType(Position)).ToList()
        End Get
    End Property

    Public ReadOnly Property Palettes() As List(Of String)
        Get
            Return [Enum].GetNames(GetType(Palette)).ToList()
        End Get
    End Property
End Class

    using C1.Chart;
using System;
using System.Linq;
using System.Collections.Generic;

namespace SunburstQuickStart
{
    public class SunburstViewModel
    {
        public List<DataItem> HierarchicalData
        {
            get
            {
                return DataService.CreateHierarchicalData();
            }
        }

        public List<FlatDataItem> FlatData
        {
            get
            {
                return DataService.CreateFlatData();
            }
        }

        public List<string> Positions
        {
            get
            {
                return Enum.GetNames(typeof(Position)).ToList();
            }
        }

        public List<string> Palettes
        {
            get
            {
                return Enum.GetNames(typeof(Palette)).ToList();
            }
        }
    }
}
  3. クラス DataItem を追加し、次のコードを追加します。
    Public Class DataItem
    Private _items As List(Of DataItem)

    Public Property Year() As String
        Get
            Return m_Year
        End Get
        Set
            m_Year = Value
        End Set
    End Property
    Private m_Year As String
    Public Property Quarter() As String
        Get
            Return m_Quarter
        End Get
        Set
            m_Quarter = Value
        End Set
    End Property
    Private m_Quarter As String
    Public Property Month() As String
        Get
            Return m_Month
        End Get
        Set
            m_Month = Value
        End Set
    End Property
    Private m_Month As String
    Public Property Value() As Double
        Get
            Return m_Value
        End Get
        Set
            m_Value = Value
        End Set
    End Property
    Private m_Value As Double
    Public ReadOnly Property Items() As List(Of DataItem)
        Get
            If _items Is Nothing Then
                _items = New List(Of DataItem)()
            End If

            Return _items
        End Get
    End Property
End Class

Public Class FlatDataItem
    Public Property Year() As String
        Get
            Return m_Year
        End Get
        Set
            m_Year = Value
        End Set
    End Property
    Private m_Year As String
    Public Property Quarter() As String
        Get
            Return m_Quarter
        End Get
        Set
            m_Quarter = Value
        End Set
    End Property
    Private m_Quarter As String
    Public Property Month() As String
        Get
            Return m_Month
        End Get
        Set
            m_Month = Value
        End Set
    End Property
    Private m_Month As String
    Public Property Value() As Double
        Get
            Return m_Value
        End Get
        Set
            m_Value = Value
        End Set
    End Property
    Private m_Value As Double
End Class

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

namespace SunburstQuickStart
{
    public class DataItem
    {
        List<DataItem> _items;

        public string Year { get; set; }
        public string Quarter { get; set; }
        public string Month { get; set; }
        public double Value { get; set; }
        public List<DataItem> Items
        {
            get
            {
                if (_items == null)
                {
                    _items = new List<DataItem>();
                }

                return _items;
            }
        }
    }

    public class FlatDataItem
    {
        public string Year { get; set; }
        public string Quarter { get; set; }
        public string Month { get; set; }
        public double Value { get; set; }
    }
}
  4. クラス Converter を追加し、次のコードを追加します。
    Imports C1.Chart
Imports System.Collections.Generic
Imports System.Globalization
Imports System.Linq
Imports System.Text
Imports System.Threading.Tasks
Imports System.Windows.Data
Public Class EnumToStringConverter
    Implements IValueConverter
    Public Function Convert(value As Object,
                            targetType As Type,
                            parameter As Object,
                            culture As CultureInfo) As Object
        Return value.ToString()
    End Function

    Public Function ConvertBack(value As Object,
                                targetType As Type,
                                parameter As Object,
                                culture As CultureInfo) As Object
        If targetType = GetType(Position) Then
            Return DirectCast([Enum].Parse(GetType(Position),
                                           value.ToString()),
                                           Position)
        Else
            Return DirectCast([Enum].Parse(GetType(Palette),
                                           value.ToString()),
                                           Palette)
        End If
    End Function

    Private Function IValueConverter_Convert(value As Object,
                                             targetType As Type,
                                             parameter As Object,
                                             culture As CultureInfo) 
As Object Implements IValueConverter.Convert
        Throw New NotImplementedException()
    End Function

    Private Function IValueConverter_ConvertBack(value As Object,
                                                 targetType As Type,
                                                 parameter As Object,
                                                 culture As CultureInfo) 
As Object Implements IValueConverter.ConvertBack
        Throw New NotImplementedException()
    End Function
End Class

    using C1.Chart;
using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Data;

namespace SunburstQuickStart
{
    public class EnumToStringConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, 
            object parameter, CultureInfo culture)
        {
            return value.ToString();
        }

        public object ConvertBack(object value, Type targetType, 
            object parameter, CultureInfo culture)
        {
            if (targetType == typeof(Position))
                return (Position)Enum.Parse(typeof(Position), value.ToString());
            else
                return (Palette)Enum.Parse(typeof(Palette), value.ToString());
        }
    }
}
  5. XAML コードを編集して、Sunburst にデータを提供します。

    <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:SunburstQuickStart"
        xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" 
        x:Class="SunburstQuickStart.MainWindow"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.Resources>
            <local:EnumToStringConverter x:Key="PaletteConverter" />
        </Grid.Resources>
        <Grid.DataContext>
            <local:SunburstViewModel />
        </Grid.DataContext>
        <c1:C1Sunburst x:Name="sunburst" Offset="0" ItemsSource="{Binding HierarchicalData}" 
        Binding="Value" BindingName="Year,Quarter,Month" ChildItemsPath="Items" 
        ToolTipContent="{}{name}&#x000A;{y}" Margin="0,10,0,0" LegendTitle="年" 
        LegendOrientation="Vertical" LegendPosition="Right" SelectionMode="Point" 
        SelectedItemPosition="Top" SelectedItemOffset="0.1" Header="四半期売上高" 
        Footer="XYZ会社 "  >
            <c1:C1Sunburst.SelectionStyle>
                <c1:ChartStyle Stroke="Red"  />
            </c1:C1Sunburst.SelectionStyle>
            <c1:C1Sunburst.LegendStyle>
                <c1:ChartStyle FontFamily="Arial" FontSize="12" 
                FontWeight="Bold" Stroke="DarkCyan"/>
            </c1:C1Sunburst.LegendStyle>
            <c1:C1Sunburst.LegendTitleStyle>
                <c1:ChartStyle FontFamily="Arial" FontSize="14" 
                FontWeight="Bold" Stroke="Blue"/>
            </c1:C1Sunburst.LegendTitleStyle>
            <c1:C1Sunburst.DataLabel>
                <c1:PieDataLabel Position="Inside" Content="{}{name}" 
                ConnectingLine="False" Border="False">
                </c1:PieDataLabel>
            </c1:C1Sunburst.DataLabel>
        </c1:C1Sunburst>
    </Grid>
</Window>

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

［F5］キーを押してアプリケーションを実行し、Sunburst チャートがどのように表示されるかを確認します.

 

 

Copyright © MESCIUS, Inc. All rights reserved.