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

Posted 2023-05-07

【中文标题】kendo-ui图表的类别标签中的换行符

【英文标题】：Line break in category label of kendo-ui chart

【发布时间】：2012-10-26 04:50:51

【问题描述】：

我有一个图表，其中标签包含两个部分，一个名称和一个数字。 我希望数字出现在名称下方，由<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: "0h" ,
            min: 0
        ,
        tooltip: 
            visible: true,
            template: "#= formatDecimal(value) #<br/> newline"
        ,
        seriesClick: onSeriesClick
    );

如何使换行符起作用？

【问题讨论】：

还不支持多行标签。请随时在 UserVoice 上为该功能投票 - feedback.kendoui.com/forums/127393-kendo-ui-feedback

UserVoice request.

【参考方案1】：

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

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

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

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

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

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

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

【讨论】：

感谢您，我已经通过将换行文本放在工具提示中来“解决”它。我会考虑使用这个解决方案。

【参考方案2】：

最终由 Telerik 实现

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

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

无论是文本、标题、标签、注释，都会发生！

【讨论】：

这是在哪个版本（版本号？）中引入的？我在 2014 年第二季度 Beta 中将其视为“多行标签”：telerik.com/support/whats-new/kendo-ui/release-history/…

嗨@TheRedPea，是的，在 2014 年第二季度。这是他们的路线图上的多年。奇迹般有效。 PS：一个未记录的功能：换行后，换行的高度可以在字体大小规范之后使用 / 来完成。所以 36px/30;将创建 36px 字体，但在换行时，行之间的丑陋空间将具有 30px 的行高。不要在 30 中指定 px。:-)