Line break in category label of kendo-ui chart

问题

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

How do i make the line break work?

回答1:

SEE UPDATE AT THE END, THIS IS NOW POSSIBLE... Leaving the below as I think it's still relevant.

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

You can use the <tspan> element.

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.

e.g.

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

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.

UPDATE (17/01/2014)

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

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

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

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

回答2:

Finally implemented by Telerik

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

The text can be split into multiple lines by using line feed characters ("\n").

Happens to text, titles, labels, notes anywere!

来源：https://stackoverflow.com/questions/13247577/line-break-in-category-label-of-kendo-ui-chart

标签

javascript

asp.net-mvc

kendo-ui