kendo-ui图表的类别标签中的换行符 [英] Line break in category label of kendo-ui chart

问题描述

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

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:

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

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 代码:

javascript code:

$("#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
    });

如何使换行符起作用?

推荐答案

请在最后查看更新，现在有可能...保留以下内容，因为我认为它仍然相关.

如果您不需要标签的位置为动态"(即有多个标签需要具有特定位置)，则还有一种选择.

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).

您可以使用 元素.

由于 Kendo 呈现的是老式 SVG 而不是 HTML5 Canvas，因此 html 标签不起作用.您必须使用 SVG 标签.这些并不是很好，因为 SVG 1.1 规范不容易允许文本换行.SVG 中文本换行的建议是 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.

例如

<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/>，这是我们所拥有的最好的.

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.

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

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.

更新 (17/01/2014)

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

According to this UserVoice http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback/suggestions/3434807-chart-multi-line-labels

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

They are planning to implement the functionality in Q1 2014, I'll update the answer once it's generally available.

更新 (27/04/2014)他们说现在将计划在第一季度之后......谁知道现在什么时候......哦......

UPDATE (27/04/2014) They've said that this will now be planned for after Q1... who knows when now... oh well...

更新 (09/01/2015)使用 "确认它在 Kendo UI v2014.3.1119 中有效.请参阅文档:http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.title.text

UPDATE (09/01/2015) Confirmed it works in Kendo UI v2014.3.1119 with " ". See documentation: http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.title.text

这篇关于kendo-ui图表的类别标签中的换行符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！