Question

我有一个图表，其中标签包含两个部分，一个名称和一个数字。我希望号码显示在名称下方，由<br/>标记说明：

line break

我加载图表的内容，并在我的控制器中设置标签： label

当我尝试在标签上使用模板时，换行符后的文本会显示在图表底部以及图表的其余部分：

enter image description here

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

如何让换行工作？

Answer 1

最后看到更新，现在可能......我认为这仍然是相关的。

如果您不需要标签的位置为“动态”（例如，有多个标签需要具有特定位置），则有另一种选择。

您可以使用<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>

如果你将上面的内容设置为你的标签，它会让你更接近，但是直到Kendo升级到像Canvas这样的HTML5技术（极不可能），或者SVG 1.2进来（2014年8月），因为这会带来<tbreak/>，这是我们所拥有的最好的。

另一个问题是，图表的渲染似乎没有考虑到文本的图形表示，因此您可能会得到一些不必要的剪辑。

更新（2014年1月17日）

根据此UserVoice http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback/suggestions/3434807-chart-multi-line-labels

他们计划在2014年第一季度实施该功能，我会在一般情况下更新答案。

更新（2014年4月27日） 他们已经说过，现在计划在Q1之后......谁知道现在......好吧......

更新（2015年1月9日） 确认它在Kendo UI v2014.3.1119中使用“\ n”。请参阅文档：http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.title.text

Answer 2

最终由Telerik实施

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

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

发生文本，标题，标签，注释！

在kendo-ui图表的类别标签中的换行符

2 个答案: