Telerik Kendo UI Angular折线图不反映图例中的破折号类型

Question

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

Answer 1

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

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

请参阅以下示例用法：

将它放在`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;
}