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

Question

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

查看我当前的图表和我需要更换的 DotNet Cart:

Answer 1

简短的回答:你不能。

长答案:你不能，但 Kendo 中有一个错误会让你......有点。

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

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

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

您可能能够通过 JS 将某些东西组合在一起，并在每次 Kendo 修改它时动态地操纵 SVG ......但是如果您打算这样做，您也可以编写一个图表库做那么多工作。

编辑:对于您的使用，如果您不必完全镜像旧显示，旋转标签可能会更好。