饼状图

的Blazor饼图将数据显示为来自二维圆的扇区，因此对于作为整体的部分显示数据非常有用。饼图中只能有一个系列。

本文假设您熟悉图基础而且数据绑定．

创建饼图:

1. 添加一个ChartSeries到ChartSeriesItems集合
2. 设置它类型财产ChartSeriesType。派
3. 为其提供数据模型集合数据财产
4. 设置场而且CategoryField属性到模型中对应的字段，这些字段携带将在图例中显示的值和名称

如果你使用简单数据绑定并且只提供数值，图表不会呈现图例。

饼系列        @code{公共类MyPieChartModel{公共字符串SegmentName {get;设置;} public double SegmentValue {get;设置;}} public List pieData = new List {new MyPieChartModel {SegmentName = "Product 1"， SegmentValue = 2}， new MyPieChartModel {SegmentName = "Product 2"， SegmentValue = 3}， new MyPieChartModel {SegmentName = "Product 3"， SegmentValue = 4}};｝

饼图特定的外观设置

旋转

默认情况下，第一个段从顶部开始。可以通过使用StartAngle级数的性质。

色域

控件可以通过在模型中提供具有所需颜色的字符串和设置ColorField它的级数。您可以传递一个有效的CSS颜色(例如，#六边形abcdef，# f00,或蓝色的）.

设置饼图项的颜色        @code{公共类MyPieChartModel{公共字符串SegmentName {get;设置;} public double SegmentValue {get;设置;}公共字符串SegmentColor{获取;设置;}} public List pieData = new List {new MyPieChartModel {SegmentName = "Product 1"， SegmentValue = 2, SegmentColor = "red"}， new MyPieChartModel {SegmentName = "Product 2"， SegmentValue = 3, SegmentColor = "#00ff00"}， new MyPieChartModel {SegmentName = "Product 3"， SegmentValue = 4, SegmentColor = "#00f"}}; }

段爆炸

你可以让饼的一些部分与圆的其余部分分开，并有一个小的边缘。这有助于将它们作为异常值或观众应该关注的重要部分引起注意。

要爆炸(分离)一段，使用ExplodeField属性，并将其设置为一个布尔字段，该字段指示段是否被展开。只有一个真正的Value会分解一个段，因此您也可以使用可空字段，并且只为您想要分离的项提供值。

从图表主体中分离项目        @code{公共类MyPieChartModel{公共字符串SegmentName {get;设置;} public double SegmentValue {get;设置;}公共bool?IsSeparated {get;设置; } } public List pieData = new List { new MyPieChartModel { SegmentName = "Product 1", SegmentValue = 2, IsSeparated = true }, new MyPieChartModel { SegmentName = "Product 2", SegmentValue = 3 }, new MyPieChartModel { SegmentName = "Product 3", SegmentValue = 4 } }; }

传说中可见

您可以从图例中隐藏某些片段(例如，如果它们的贡献微不足道)。为此，向模型添加一个布尔字段，并将其名称设置为VisibleInLegendField饼级数的属性。该字段中的标志将表示该特定项目是否将在图例中呈现。

只显示图例中的一些项目        @code{公共类MyPieChartModel{公共字符串SegmentName {get;设置;} public double SegmentValue {get;设置;} public bool ShouldShowInLegend{获取;设置;} = true; } public List pieData = new List { new MyPieChartModel { SegmentName = "Product 1", SegmentValue = 2 }, new MyPieChartModel { SegmentName = "Product 2", SegmentValue = 3 }, new MyPieChartModel { SegmentName = "Product 3", SegmentValue = 4 }, new MyPieChartModel { SegmentName = "Insignificant Product", SegmentValue = 0.1, ShouldShowInLegend = false } }; }

自定义图表元素-嵌套标签设置

在图表中配置嵌套属性和子元素时，内部标记将包含它们的父标记名称，并在其末尾添加细节。一般来说，这种嵌套标记的结构将是<图*级* * *细节>类别可以是以下其中之一:

• CategoryAxis
• ChartArea
• 传说
• PlotArea
• SeriesItems
• 标题
• 工具提示
• ValueAxis
• XAxes
• YAxes
• 和其他人

要自定义图表，请寻找嵌套标记及其属性——内部标记将包含它们的父标记名称并在其末尾添加细节。例如，ChartSeries标签有一个ChartSeriesLabels标记，该标记公开配置选项和更多子标记。

例如，对于axis-free图表，你可以旋转他们的标签，标题，图例和其他。方法中的参数自定义图表系列标签

ChartSeriesItems>ChartSeries>ChartSeriesLabels标记及其子标记。

这种方法不仅限于标签——它可以用于适用于图表类型的所有标签，例如图表标题ChartTitle>ChartTitleMargin．

另请参阅

• 现场演示:饼图