剑道图表列多行标签答案

【问题标题】：Kendo Chart Column Multi-Line Labels剑道图表列多行标签
【发布时间】：2014-03-12 18:11:12
【问题描述】：

我最近继承了一个广泛使用剑道图表的项目，并要求在列标签中添加一些信息。标签当前包含一个整数和一个百分比，修订版将添加一个额外的百分比值。由于标签有点长，因此需要将它们分成多行。

所以一个列标签，当前写着：

3, 0.00%

现在会读

3

0.00%

9.99%

代码是MVC风格排列的，所以判断每个标签的代码类似如下：

.Labels(labels => labels.Visible(true).Position(ChartBarLabelsPosition.OutsideEnd)
                        .Template("#= value #, #= kendo.format('{0:P}', dataItem.GetPercent)#"))
                        .Tooltip(t => t.Template("#=series.name#: #= value #, #= kendo.format('{0:P}', dataItem.GetPercent)#").Visible(true));

这似乎应该是一件简单的事情，但我找不到在标签中正常工作的换行符的语法。 Kendo 似乎确实试图解释<br /> 条目，但这些会破坏图表的流程并导致所有后续标签值显示在整个图表下方，而不是在列上方。我搜索过的一些论坛帖子断言这在剑道中目前是不可能的，但也提到它“将在 2014 年成为可能”（尽管其中大部分是较旧的帖子，因为我对剑道不太了解，所以我可以会误解他们指的是哪些标签）。

如果当前不支持该功能，谁能向我提供在此类标签中插入换行符的正确语法（来自代码）或可能的解决方法？

谢谢！

更新我找到了<tspan> 解决方法，它确实有点帮助，但看起来仍然很糟糕，因为我的图表随页面动态调整大小（因此，对于堆叠条形图，每列的宽度和起始位置不是静态的）。 <tspan> 标签尊重每个标签的 y 坐标，但不尊重其 x 坐标，因此必须为每一列单独设置；如果未设置，所有列的标签将出现在图表的最左侧，y 轴值所在的位置。由于图表是动态的，因此没有“正确”的静态值可以放在那里，而且我无法找到从模板代码中获取列起始位置的方法。有没有办法纠正这个问题，使<tspan> 变通办法成为一个可行的选择？

（找到解决方法here）

【问题讨论】：

标签： asp.net-mvc kendo-ui kendo-asp.net-mvc kendo-chart

【解决方案1】：

从 2014-Q2 版本开始，Telerik / KendoUI 最终实现了\n 请参阅文档：

可以使用换行符（“\n”）将文本分成多行。

http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.title.text

【讨论】：

感谢您的更新，希望它能帮助过去遇到此问题的其他人。