如何将模板添加到 kendo-chart-series 中的 kendo-chart-series-item-label？答案

【问题标题】：How to add template to kendo-chart-series-item-label in kendo-chart-series?如何将模板添加到 kendo-chart-series 中的 kendo-chart-series-item-label？
【发布时间】：2018-02-21 23:28:01
【问题描述】：

我正在尝试将模板添加到 kendo-chart-series-item-labels。我在这个链接中使用了类似的例子：https://plnkr.co/edit/eICeHxnl0JoIwuRYyRSt?p=preview

在 app.components.ts 文件中，而不是这个方法：

public labelContent(e: any): string {
        return `${ e.category }: \n ${e.value}%`;
    }

我可以在元素本身中有一个模板吗？示例：

<kendo-chart-series-item-labels
                                  color="gray"
                                  position="outsideEnd"
                                  template="#= category # - #= kendo.format('{0:P}', percentage)#"
                                  align="column"
                                  background="none">

此模板不起作用。所以我的问题是如何编写模板来显示值？

谢谢！

【问题讨论】：

标签： angular kendo-ui

【解决方案1】：

（目前）无法直接在kendo-chart-series-item-labels 元素中设置模板。但是有 3 种替代方案可以使用。

选项 A - 格式字符串

如果您“只想”正确格式化显示的数字，可以使用format 输入，它适用于所有类型的number formats。

<kendo-chart-series-item-labels [format]="'n2'">
</kendo-chart-series-item-labels>

选项 B - 内容回调

这是您在链接的示例中已经执行的操作。基本上，您向图表提供function，它指定标签的外观。

<kendo-chart-series-item-labels [content]="contentString">
</kendo-chart-series-item-labels>

public contentString(content) {
    // return the formatted label as a string
}

选项 C - 视觉内容回调

与Option B 非常相似，但不是返回应显示的字符串，而是返回kendo-drawing 元素。

<kendo-chart-series-item-labels [visual]="contentVisual">
</kendo-chart-series-item-labels>

public contentVisual(content: SeriesLabelsVisualArgs) {
    // return the formatted label as a kendo-drawing-element
}

关于这些选项的详细解释可以在their website找到。

【讨论】：