Question

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

所以当前读取的列标签为：

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));

看起来这应该是一件简单的事情，但我无法找到正确处理标签中的换行符的语法。剑道似乎试图解释<br />条目，但这些条目会破坏图表的流程并导致所有后续标签值显示在整个图表下方，而不是显示在列上方。我搜索过的一些论坛帖子声称，这在剑道目前是不可能的，但也提到它将在2014年实现。＆＃39; （其中大多数都是较旧的帖子，因为我不太了解剑道，我可能会误解他们指的是哪个标签）。

任何人都可以向我提供正确的语法，以便在此类标签中插入换行符（来自代码），或者如果当前不支持该功能，可以使用可能的解决方法吗？

谢谢！

更新我找到了<tspan>解决方法，这确实有点帮助，但仍然看起来非常糟糕，因为我的图表会随页面动态调整大小（因此，对于堆积条形图，每列的宽度和起始位置不是静态的）。 <tspan>标记尊重每个标签的y坐标，但不考虑其x坐标，因此必须为每个列单独设置;如果未设置，则所有列的标签将显示在图表的y轴值所在的最左侧。由于图表是动态的，因此没有＆＃34;正确的＆＃34;放在那里的静态值，我一直无法找到从模板代码中获取列的起始位置的方法。有没有办法纠正这种情况，<tspan>解决方法成为可行的选择？

（解决方法找到here）

Answer 1

从2014年第2季度开始，Telerik / KendoUI最终实现了\ n 请参阅文档：

可以使用换行符（＆＃34; \ n＆＃34;）将文本拆分为多行。

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

剑道图表列多行标签

1 个答案: