kendo-ui - Telerik KendoUI Angular 折线图未反映图例中的 dashType

Question

我有一个图表，我在其中为不同的系列设置了 dashType 属性，但图例并未反映设置，而是将所有内容显示为实线。你如何让图例反映这种设置？我正在使用带有最新版本的图表组件的 Angular 7。任何帮助表示赞赏。

标签： kendo-uikendo-ui-angular2

Answer 1

开箱即用不支持此行为，但可以添加。您可以在此处查看有关它的问题和 Telerik 论坛上的回复。

建议的解决方案是使用组件的[item]属性kendo-chart-legend。

请参阅以下示例用法：

将它放在你的组件模板中的`Kendo Chart 组件中：

<kendo-chart-legend position="bottom" orientation="horizontal" [item]="{ visual: legendItemVisual }">
</kendo-chart-legend>

将其放在组件的代码中：

public legendItemVisual = (args: any) => {
    const path = new Path({ stroke: { color: args.series.color, dashType: args.series.dashType, width: 2}})
        .moveTo(0, 0).lineTo(25);
    const text = new Text(args.series.name);
    const layout = new Layout(new Rect([0, 0], [Number.MAX_VALUE, 0]), {
        alignItems: "center",
        cursor: 'pointer',
        spacing: 5
    });

    layout.append(path, text);
    layout.reflow();

    return layout;
}