Javascript 剑道ui图表类别标签中的换行符

Javascript 剑道ui图表类别标签中的换行符,javascript,asp.net-mvc,kendo-ui,kendo-chart,Javascript,Asp.net Mvc,Kendo Ui,Kendo Chart,我有一个图表,其中标签包含两个部分,一个名称和一个数字。 我希望号码出现在姓名下方,如标签所示: 我加载图表的内容,并在控制器中设置标签: 当我尝试在标签上使用模板时,换行符后的文本将与图表的其余文本一起显示在图表底部: javascript代码: $("#chart1").kendoChart({ theme: "BlueOpal", title: { text: "My reported hours" }, legend: { posit

我有一个图表,其中标签包含两个部分,一个名称和一个数字。 我希望号码出现在姓名下方,如标签所示:

我加载图表的内容,并在控制器中设置标签:

当我尝试在标签上使用模板时,换行符后的文本将与图表的其余文本一起显示在图表底部:

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
    });
$(“#图表1”)。肯多卡特({
主题:“蓝蛋白石”,
标题:{文本:“我报告的小时数”},
图例:{位置:“底部”},
序列默认值:{type:“column”},
数据源:{
运输:{
阅读:{
url:dataUrl,
数据类型:“json”
}
}
},
系列:[{field:“SeriesField”}],
类别:{
字段:“CategoryAxis”,
标签:{
轮换:0,
模板:“#=值#
换行” }, }, valueAxis:{ 标签:{格式:{0}h}, 最低:0 }, 工具提示:{ 可见:对, 模板:“#=格式十进制(值)#
换行” }, 序列单击:onSeriesClick });

如何使换行工作正常?

请参阅最后的更新,现在这是可能的。。。保留我认为仍然相关的以下内容。

如果您不需要将标签的位置设置为“动态”(即,有多个标签需要具有特定位置),则可以选择此选项

您可以使用
元素

由于Kendo呈现的是老式的SVG,而不是HTML5画布,因此html标记不起作用。您必须使用SVG标记。这些都不是很好,因为SVG1.1规范不容易允许文本包装。建议使用tspan在SVG中进行文本换行

e、 g

测试
其他7
如果您将以上内容设置为您的标签,这将使您更接近,但直到剑道升级到HTML5技术,如Canvas(极不可能),或SVG 1.2(2014年8月),因为这带来了
,这是我们最好的

还有一个问题是,图表的呈现似乎没有考虑到文本的图形表示,因此可能会得到一些不需要的剪辑

更新(2014年1月17日)

根据这个用户的声音

他们计划在2014年第1季度实现该功能,我将在答案正式可用后更新答案

更新(2014年4月27日) 他们说这将在第一季度后计划。。。谁知道现在什么时候。。。哦,好吧

更新(2015年1月9日)
已确认其在Kendo UI v2014.3.1119中有效,带有“\n”。参见文档:

最终由Telerik实施

可以使用换行符(“\n”)将文本拆分为多行


发生在文本、标题、标签、注释上

尚不支持多行标签。请随意在UserVoice上投票支持此功能-。谢谢,我已经通过在工具提示中添加换行符“解决”了它。我将研究使用此解决方案。在哪个版本(版本号?)中引入了此解决方案?我在2014年第二季度的测试版中将其视为“多线标签”:Hi@TheRedPea,是的,在2014年第二季度。在他们的路线图上已经有很长时间了。工作起来很有魅力。PS:一个未记录的特性:换行后,换行的高度可以通过字体大小规格来完成。so36px/30;将创建36px字体,但包装时,行之间丑陋的空格将具有30px的行高。不要在30中指定px:-)
<tspan x="30" dy="0" text-anchor="middle">Test</tspan>
<tspan x="30" dy="1.5em"text-anchor="middle">Other 7</tspan>