javascript kendo-ui图表的类别标签中的换行符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13247577/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Line break in category label of kendo-ui chart
提问by user1546010
I have a chart where the labels contain two parts, a name an a number.
I want the number to appear below the name, illustrated by the <br/>tag:
我有一个图表，其中标签包含两个部分，一个名称和一个数字。我希望数字出现在名称下方，由<br/>标签说明：
I load the contents of the chart, and set the label in my controller:
我加载图表的内容，并在我的控制器中设置标签：
When i try to use a template on the label, the text after the line break appears at the bottom of the chart along with the rest of the text of the chart:
当我尝试在标签上使用模板时，换行符后的文本与图表的其余文本一起出现在图表底部：
javascript code:
javascript代码：
$("#chart1").kendoChart({
theme: "BlueOpal",
title: { text: "My reported hours" },
legend: { position: "bottom" },
seriesDefaults: { type: "column" },
dataSource: {
transport: {
read: {
url: dataUrl,
dataType: "json"
}
}
},
series: [{ field: "SeriesField" }],
categoryAxis: {
field: "CategoryAxis",
labels: {
rotation: 0,
template: "#=value#<br/>newline"
},
},
valueAxis: {
labels: { format: "{0}h" },
min: 0
},
tooltip: {
visible: true,
template: "#= formatDecimal(value) #<br/> newline"
},
seriesClick: onSeriesClick
});
How do i make the line break work?
我如何使换行符工作？
采纳答案by Martin
SEE UPDATE AT THE END, THIS IS NOW POSSIBLE... Leaving the below as I think it's still relevant.
看到最后的更新，这现在是可能的......离开下面，因为我认为它仍然相关。
There is an alternative if you don't need the location of the label to be "Dynamic" (i.e. there are multiple labels that need to have specific positions).
如果您不需要标签的位置为“动态”（即有多个标签需要具有特定位置），则还有另一种选择。
You can use the <tspan>element.
您可以使用该<tspan>元素。
As Kendo renders the old school SVG rather than the HTML5 Canvas, html tags don't work. You have to use SVG tags. These are not great as the SVG 1.1 spec doesn't easily allow for text wrapping. The recommendation for text wrapping in SVGs is the tspan.
由于 Kendo 呈现的是老式 SVG 而不是 HTML5 Canvas，因此 html 标签不起作用。您必须使用 SVG 标签。这些并不是很好，因为 SVG 1.1 规范不容易允许文本换行。SVG 中文本换行的建议是 tspan。
e.g.
例如
<tspan x="30" dy="0" text-anchor="middle">Test</tspan>
<tspan x="30" dy="1.5em"text-anchor="middle">Other 7</tspan>
if you set the above as your label, it will get you closer, but until Kendo upgrade to HTML5 technologies like Canvas (highly unlikely), or SVG 1.2 comes in (August 2014) as this brings <tbreak/>, this is about the best we have.
如果您将上述设置为您的标签，它会让您更接近，但直到 Kendo 升级到 HTML5 技术，如 Canvas（极不可能）或 SVG 1.2 出现（2014 年 8 月），因为这带来了<tbreak/>，这大约是我们拥有的最好的。
There is also another problem in that the rendering of the chart doesn't appear to take into account the graphical representation of the text, so you might get some unwanted clipping.
还有一个问题是图表的渲染似乎没有考虑文本的图形表示，因此您可能会得到一些不需要的剪裁。
UPDATE (17/01/2014)
更新 (17/01/2014)
According to this UserVoice http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback/suggestions/3434807-chart-multi-line-labels
根据这个 UserVoice http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback/suggestions/3434807-chart-multi-line-labels
They are planning to implement the functionality in Q1 2014, I'll update the answer once it's generally available.
他们计划在 2014 年第一季度实施该功能，一旦普遍可用，我将更新答案。
UPDATE (27/04/2014)They've said that this will now be planned for after Q1... who knows when now... oh well...
更新 (27/04/2014)他们说现在计划在第一季度之后......谁知道现在什么时候......哦......
UPDATE (09/01/2015)Confirmed it works in Kendo UI v2014.3.1119 with "\n". See documentation: http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.title.text
更新 (09/01/2015)确认它在 Kendo UI v2014.3.1119 中使用 "\n" 工作。请参阅文档：http: //docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.title.text
回答by Langeleppel
Finally implemented by Telerik
最终由 Telerik 实现
The text can be split into multiple lines by using line feed characters ("\n").
可以使用换行符 ("\n") 将文本拆分为多行。
Happens to text, titles, labels, notes anywere!
发生在文本、标题、标签、注释上！
