11

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

越线

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

当我尝试在标签上使用模板时，换行后的文本与图表的其余文本一起出现在图表底部：

在此处输入图像描述

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

我如何使换行符起作用？

4

2 回答 2

10

请参阅最后的更新，这现在是可能的......离开下面，因为我认为它仍然相关。

如果您不需要标签的位置为“动态”（即有多个标签需要具有特定位置），则可以使用另一种方法。

您可以使用该<tspan>元素。

由于 Kendo 呈现的是老式 SVG 而不是 HTML5 Canvas，因此 html 标签不起作用。您必须使用 SVG 标签。这些都不是很好，因为 SVG 1.1 规范不容易允许文本换行。SVG 中文本换行的建议是 tspan。

例如

<tspan x="30" dy="0" text-anchor="middle">Test</tspan>
<tspan x="30" dy="1.5em"text-anchor="middle">Other 7</tspan>

如果您将上述内容设置为您的标签，它会让您更接近，但在 Kendo 升级到 HTML5 技术（如 Canvas（极不可能））或 SVG 1.2 出现（2014 年 8 月）<tbreak/>之前，这是我们拥有的最好的。

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

更新（2014 年 17 月 1 日）

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

他们计划在 2014 年第一季度实现该功能，一旦它普遍可用，我将更新答案。

更新（2014 年 4 月 27 日） 他们说现在计划在第一季度之后进行……谁知道现在什么时候……哦，好吧……

更新 (09/01/2015) 确认它在带有“\n”的 Kendo UI v2014.3.1119 中工作。请参阅文档：http ://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.title.text

于 2013-01-03T17:23:38.990 回答
3

最终由 Telerik 实现

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

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

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

于 2014-10-02T13:11:07.560 回答