javascript - 使用 KendoUI 折线图，如何在类别上附加多个折线标签？

Question

我正在用 KendoUI 替换 DotNet Charting 图表。我需要能够在折线图上放置多线标签。请参见下图，标签上有红色圆圈。任何建议将不胜感激。

查看我当前的图表和我需要更换的 DotNet 购物车：

Answer 1

简短的回答：你不能。

长答案：你不能，但你在剑道中有一个错误会让你......有点。

Kendo 正在为您的图表动态创建 SVG。SVG 只是 XML，您可以通过 javascript 配置将 XML 注入到元素中。

对于您的标签，您必须使用元素来定位文本。请参阅此元素的 SVG 规范：http: //www.w3.org/TR/SVG/text.html#TSpanElement

这里的问题是 Kendo 使用左对齐文本，并且您无法使用此错误更改父元素。这意味着您必须手动偏移所有内容，一次一个像素。如果您的文本是静态的，这可能会起作用；如果它是动态的，我什至不会尝试它。

您可能可以通过 JS 一起破解某些东西，并在每次 Kendo 修改 SVG 时动态操作它……但如果您要做那么多工作，您也可以编写一个图表库。

编辑：为了您的使用，如果您不必完全镜像旧显示器，最好旋转标签。