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输入，该输入适用于各种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 - 可视内容回调

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

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

1 个答案: