标签模板和格式

Blazor的图表可以在坐标轴、系列数据点和图例上渲染标签。您不仅可以通过数据绑定的值来控制这些文本，还可以通过格式字符串或模板．

要打开系列标签，必须设置其可见财产真正的对应的ChartSeriesLabels标签。默认情况下，系列标签是关闭的，以避免混乱，并使图表更容易阅读。

您可以跳转到本文的以下部分:

• 格式字符串
• 模板
  • 示例:有条件地隐藏标签

格式字符串

标签是数值的(系列值，值轴)，您可以通过格式属性的对应标签的内部标记。这可以让你设置标准数字格式字符串到要显示的值，例如百分比、货币等。

标准数字格式字符串  < ChartSeriesLabels Visible="true" Format="{0:C2}">           @code{公共类MyChartDataModel{公共双值TheValue {get;设置;}公共字符串类别{get;设置;}} public List chartData = new List {new MyChartDataModel {TheValue = 20000, category = "2017"}， new MyChartDataModel {TheValue = 300000, category = "2018"}， new MyChartDataModel {TheValue = 400000, category = "2019"}};｝

模板

方法可以为相应的标签设置模板模板属性在您想要自定义的元素对应的Label内部标记中，例如，在ChartSeriesLabels或在ChartValueAxisLabels．

在这个示例之后，您可以找到包含可以在模板中使用的可用字段的列表。

要添加新行，请使用\ n的象征。方法添加其他可用对象# =对象#语法。您可以在下面的代码示例中找到更多细节(包括简单的if块逻辑)。

模板的一般语法基于剑道模板．注意，图表标签不是HTML元素，不能在其中使用HTML，只允许使用纯字符串。此外，来自Kendo jQuery库的各种帮助函数在Blazor中是不可用的(例如，kendo.toString ()或kendo.format ()）.

要格式化值，需要调用一个JavaScript函数，该函数将根据传递给它的模板值返回所需的新字符串。你可以在如何格式化百分比在一个馅饼或甜甜圈图表的标签知识库文章和标签格式-复杂逻辑示例项目。

标签模板  < ChartSeriesLabels Visible="true" Template="@MySeriesTemplate">             < ChartLegend位置= " ChartLegendPosition。右">< ChartLegendLabels Template="@MyLegendItemTemplate">   @code{公共字符串MySeriesTemplate =" value: #=value#\nfor category: #=category#\nextra info: #=dataItem.ExtraData#";public string MyCategoryAxisTemplate = "#=value# quarter";public string MyValueAxisTemplate = "#=value# million";public string MyLegendItemTemplate = "#=系列。文本颜色#:# = #”;public class MyChartDataModel {public double TheValue {get; set; } public string ExtraData { get; set; } public string TheCategory { get; set; } } public List chartData = new List { new MyChartDataModel { ExtraData = "one", TheValue = 2, TheCategory = "first" }, new MyChartDataModel { ExtraData = "two\nlines", TheValue = 3, TheCategory = "second" }, new MyChartDataModel { ExtraData = "three", TheValue = 4, TheCategory = "third" } }; }

在一个系列标签模板，你可以使用以下字段:

• 类别-类别名称。可用于区、条、列、圈、线、饼系列。
• dataItem-用于构造点的原始数据项。将零如果绑定到数组。示例语法:# = dataItem。MyModelFieldName #．
• 百分比-以百分比值表示的点值。只适用于甜甜圈，馅饼和100%堆叠图表。
• stackValue-堆栈上的累积点值。只适用于可堆叠系列。
• 价值-点值。可以是包含每个绑定字段的数字或对象。

在一个类别轴标签模板，你可以使用以下字段:

• 价值-类别值
• 格式—标签的默认格式

在一个值轴标签模板，你可以使用以下字段:

• 价值-标签值

在一个图例物品标签模板，你可以使用以下字段:

• 文本-文本的传说项目
• 系列-数据系列
• 价值-点值(仅适用于甜甜圈和饼图)
• 百分比-以百分比值表示的点值。只适用于甜甜圈，馅饼和100%堆叠图表

有条件地隐藏标签

在某些情况下，您希望序列具有标签，但某些数据点必须没有标签。例如，在堆叠系列某个值在哪里0．

要做到这一点，你需要:

• 在模板中添加条件逻辑，在满足条件时呈现所需的内容，在不满足条件时不返回任何内容。
• 确保标签背景是透明的，这样图表上就不会有剩余的斑点。

这个例子还展示了模板中不需要外部函数的基本逻辑使用。

条件标签显示  < ChartSeriesLabels Visible="true" Template="@MySeriesTemplate" Background="transparent">   < ChartSeriesLabels Visible="true" Template="@MySeriesTemplate" Background="transparent">    @code{公共字符串MySeriesTemplate =" # if (value != 0) {# #=value# #}#";public class MyChartDataModel {public double Value1 {get;设置;} public double Value2 {get;设置;}公共字符串类别{get; set; } } public List chartData = new List { new MyChartDataModel { Value1 = 3, Value2 = 2, TheCategory = "Q1" }, new MyChartDataModel { Value1 = 1, Value2 = 0, TheCategory = "Q2" }, new MyChartDataModel { Value1 = 0, Value2 = 0, TheCategory = "Q3" } }; }

另请参阅

• 现场演示:图表