11

ラベルに名前と数字の 2 つの部分が含まれるチャートがあります。<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
    });

改行を機能させるにはどうすればよいですか?

4

2 に答える 2

10

最後に更新を参照してください。これは現在可能です...まだ関連があると思うので、以下を残します。

ラベルの位置を「動的」にする必要がない場合 (つまり、特定の位置を持つ必要があるラベルが複数ある場合) は別の方法があります。

要素を使用できます<tspan>。

Kendo は HTML5 Canvas ではなく古い学校の SVG をレンダリングするため、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 が Canvas などの HTML5 テクノロジにアップグレードする (可能性は非常に低い) か、SVG 1.2 が導入される (2014 年 8 月)までは<tbreak/>、これが私たちが持っている最高のものです。

また、グラフのレンダリングがテキストのグラフィック表現を考慮していないように見えるという別の問題もあります。そのため、不要なクリッピングが発生する可能性があります。

更新 (2014 年 1 月 17 日)

この UserVoice によるとhttp://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback/suggestions/3434807-chart-multi-line-labels

2014 年第 1 四半期に機能を実装する予定です。一般に利用可能になったら、回答を更新します。

更新 (2014 年 4 月 27 日) 彼らは、これは第 1 四半期以降に計画されると言っています...いつになるかは誰にもわかりません...まあ...

更新 (2015 年 9 月 1 日) Kendo UI v2014.3.1119 で "\n" を使用して動作することを確認しました。ドキュメントを参照してください: http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.title.text

于 2013-01-03T17:23:38.990 に答える
3

最終的にTelerikによって実装されました

http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.title.textを参照してください。

テキストは、改行文字 ("\n") を使用して複数の行に分割できます。

テキスト、タイトル、ラベル、メモなどすべてに適用されます。

于 2014-10-02T13:11:07.560 に答える