1

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

因此，当前显示的列标签为：

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>解决方法成为一个可行的选择？

（解决方法在这里找到）

4

1 回答 1

1

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

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

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

于 2014-10-02T13:15:52.343 回答