Разрыв строки в метке категории кендо-ий-диаграммы

У меня есть диаграмма, где метки содержат две части, имя - число. Я хочу, чтобы номер появлялся под именем, обозначенным тегом <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
    });

Как сделать работу с разрывом строки?

Ответы

Ответ 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 года), так как это приносит <tbreak/>, это о лучшем, что у нас есть.

Есть и другая проблема в том, что рендеринг диаграммы не отражает графического представления текста, поэтому вы можете получить нежелательное обрезание.

ОБНОВЛЕНИЕ (17/01/2014)

В соответствии с этим UserVoice http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback/suggestions/3434807-chart-multi-line-labels

Они планируют реализовать функциональность в Q1 2014, я обновлю ответ, как только он станет общедоступным.

ОБНОВЛЕНИЕ (27/04/2014) Они сказали, что это будет теперь запланировано после Q1... кто знает, когда сейчас... о хорошо...

ОБНОВЛЕНИЕ (09/01/2015) Подтвердил, что он работает в Kendo UI v2014.3.1119 с "\n". См. Документацию: http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.title.text