.NET MAUI コントロール
サンバーストチャート
コントロール > FlexChart > チャートタイプ > 特殊チャート > サンバーストチャート

Sunburst, also known as a multi-level pie chart, is ideal for visualizing multi-level hierarchical data depicted by concentric circles. The circle in the center represents the root node surrounded by the rings representing different levels of hierarchy. Rings are divided based on their relationship with the parent slice with each of them either divided equally or proportional to a value. For instance, you can use sunburst to display sales over past few years or to display makes or models of a product.

Sunburst

FlexChart provides sunburst chart through a stand alone Sunburst control which is represented by the C1Sunburst class. To create a sunburst chart through code, the first step after initializing the control is to configure the chart by setting the Binding and BindingName property. These properties are used for setting the numeric values and labels of the sunburst slices. Then, you need to set the ChildItemsPath property to generate child items in hierarchical data as showcased in the following XAML code:

XAML
コードのコピー 
<c1:C1Sunburst Header="Yearly Sales Data" Binding="sales" BindingName="type"
          ChildItemsPath="items" LegendPosition="Bottom"
          ItemsSource="{Binding Data}" ToolTipContent="{}{type}:{value}">
    <c1:C1Sunburst.DataLabel>
        <c1:PieDataLabel Position="Center" Content="{}{type}" Overlapping="Trim" />
    </c1:C1Sunburst.DataLabel>
</c1:C1Sunburst>

Following C# code supplies data to the chart.

C#
コードのコピー 
SalesDataItem[] _data;
public SalesDataItem[] Data => _data == null ? _data = DataSource.CreateHierarchicalData() : _data;

public class SalesDataItem
{
    public string type { get; set; }
    public double sales { get; set; }

    public SalesDataItem[] items { get; set; }
}

class DataSource
{
    public static SalesDataItem[] CreateHierarchicalData()
    {
        var data = new SalesDataItem[] {
                new SalesDataItem {
                    type = "エレクトロニクス",
                    items = new SalesDataItem[] {
                        new SalesDataItem{
                            type = "カメラ",
                            items = new SalesDataItem[]
                            {
                                    new SalesDataItem{ type = "デジタル", sales = rand() },
                                    new SalesDataItem{ type = "フィルム", sales = rand() },
                                    new SalesDataItem{ type = "レンズ", sales = rand() },
                                    new SalesDataItem{ type = "ビデオ",  sales = rand() },
                                    new SalesDataItem{ type = "アクセサリー", sales = rand() }
                            }
                        },
                        new SalesDataItem{
                            type = "ヘッドフォン",
                            items = new SalesDataItem[]
                            {
                                    new SalesDataItem{ type = "イヤフォン", sales = rand() },
                                    new SalesDataItem{ type = "オーバーイヤー", sales = rand() },
                                    new SalesDataItem{ type = "オンイヤー", sales = rand() },
                                    new SalesDataItem{ type = "Bluetooth", sales = rand() },
                                    new SalesDataItem{ type = "ノイズキャンセリング", sales = rand() },
                                    new SalesDataItem{ type = "オーディオファイル", sales = rand() }
                            }
                        }
                    }
                },
                new SalesDataItem{
                    type = "Computers\n& Tablets",
                    items = new SalesDataItem[]
                    {
                        new SalesDataItem
                        {
                            type = "デスクトップ",
                            items = new SalesDataItem[]
                            {
                                new SalesDataItem{ type = "オールインワン", sales = rand() },
                                new SalesDataItem{ type = "ミニ", sales = rand() },
                                new SalesDataItem{ type = "タワー", sales = rand() }
                            }
                        },
                        new SalesDataItem
                        {
                            type = "パソコン",
                            items = new SalesDataItem[]
                            {
                                new SalesDataItem{ type = "2 in 1", sales = rand() },
                                new SalesDataItem{ type = "従来型", sales = rand() }
                            }
                        },
                        new SalesDataItem
                        {
                            type = "タブレット",
                            items = new SalesDataItem[]
                            {
                                new SalesDataItem{ type = "iOS", sales = rand() },
                                new SalesDataItem{ type = "Android", sales = rand() },
                                new SalesDataItem{ type = "Fire os", sales = rand() },
                                new SalesDataItem{ type = "Windows", sales = rand() }
                            }
                        }
                    }
                }
            };
        return data;
    }

    static Random rnd = new Random();
    static int rand() => rnd.Next(10, 100);
}

 

 

Copyright © MESCIUS inc. All rights reserved.