kendo-ui 圖表類別標簽中的換行符

Question

我有一個圖表，其中標簽包含兩個部分，一個名稱和一個數字。 我希望數字顯示在名稱下方，如<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
    });

我如何使換行符工作？

Answer 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/> ，這是關於我們最好的。

還有另一個問題是圖表的呈現似乎沒有考慮文本的圖形表示，因此您可能會得到一些不需要的剪裁。

更新 (17/01/2014)

根據這個 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）確認它在 Kendo UI v2014.3.1119 中使用“\n”工作。 請參閱文檔： http ://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.title.text

Answer 2

最后由 Telerik 實現

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

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

發生在文本、標題、標簽、注釋中的任何地方！