如何将模板添加到Kendo-Chart-Chart系列中的Kendo-Chart系列 - 项目标签

Question

我正在尝试将模板添加到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">

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

谢谢！

Answer 1

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

选项a - 格式字符串

如果您"只"要正确格式化所示的数字，则可以使用format输入，该输入适用于各种数字格式。

<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 - 视觉内容回调

与选项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
}

可以在其网站上找到有关这些选项的详细说明。