4

剣道棒グラフシリーズのラベルの配置を変更するには? 次のフィドルを検討してください: http://jsfiddle.net/ZPUr4/149/

グラフでは、正の値のバーの値が上部にあり、負の値のバーの値が下部にあります。

正の値と負の値のバーの上部に系列ラベルの値を配置する方法は?

バーの値が異なる場合でも、すべてのラベルの値を同じ水平線に表示するにはどうすればよいですか?

私の質問が明確でない場合はお知らせください。

以下は HTML コードです。

    <div id="example" class="k-content">
    <div id="chart"></div>
</div>

JS コード:

function createChart() {
        $("#chart").kendoChart({
            title: {
                text: "Site Visitors"
            },
            legend: {
                position: "bottom"
            },
            seriesDefaults: {
                type: "column",
                labels: {
                    visible: true,
                    background: "transparent",

                }
            },
            series: [{
                name: "Total Visits",
                data: series1,
                gap: 1.0,
                spacing: 0
            }, {
                name: "Unique visitors",
                data: series2,
                gap: 1.0
            }],
            valueAxis: {
                min: -200000,
                max: 200000,
                axisCrossingValue: 50000,  
                line: {
                    visible: false
                },
                title: {
                    text: "Availability"
                },

                color: 'blue'
            },
            categoryAxis: {
               color: "blue",
                width: 25,
                majorGridLines: {
                    visible: true,
                    position: "bottom"
                },
                line: {
                    width: 3,
                }
            },
            tooltip: {
                visible: true,
                format: "{0}"
            }
        });
    }

var series1=[56000, 63000, 74000, 91000, 117000, 158000];
var series2= [-52000, 34000, 23000, -98000, 67000, 83000];

    $(document).ready(function () {
        createChart();

        $("#example").bind("kendo:skinChange", createChart);

        var chart = $("#chart").data("kendoChart"),
            firstSeries = chart.options.series;
    });

ありがとう。

4

3 に答える 3

6

値が上にあることを指定するには、次を使用する必要があります。

labels: {
    visible: true,
    position: "top"
}

しかし、これでバーの中に数値が配置されます。外に移動するには、次のことを行う必要があります。

labels: {
    visible: true,
    position: "top",
    padding: {
        top: -20
    }
}

20 ピクセルアップの場所を追加するpadding.topと、十分なはずです。

ここで変更された JSFiddle: http://jsfiddle.net/OnaBai/ZPUr4/178/

于 2014-06-02T17:18:13.793 に答える
0

見出し ------- 等幅フォントで表示されます。最初の 4 つのスペースは取り除かれますが、他のすべての空白は保持されます。

Markdown and HTML are turned off in code blocks:
<i>This is not italic</i>, and [this is not a link](http://example.com)

ブロックではなくインライン コード スパンを作成するには、バッククォートを使用します。

キャラクターはの$ショートカットですwindow.jQuery。リスト内にフォーマット済みのブロックが必要な場合は、8 つのスペースでインデントします。

  1. これは通常のテキストです。

  2. これもそうですが、次のコード ブロックが続きます。

    Skip a line and indent eight spaces.
That's four spaces for the list
and four to trigger the code block.
于 2017-01-17T02:56:07.963 に答える
0

少し遅れていますが、おそらくあなたや他の誰かにとってまだ有用です.

私は自分のグリッドにかなりのカスタム スタイルを適用しています。次のようにして、ラベルを同じ行のグラフの上に配置できます。

function chartBound(e) {
    var chartData = e.sender;
    var oldPrivateRedraw = chartData._redraw;
    if (oldPrivateRedraw.toString().indexOf('Extend') == -1) { //not already extended
        //Extends kendos function so we can do custom styling to svg components etc
        chartData._redraw = function () {
            oldPrivateRedraw.apply(chartData);
            PostGraphDrawEvents();
        };
    }
}
function PostGraphDrawEvents() {
    // Move the labels to the top of the graph
    $.each($('#@chartId svg > g > text[style*="11px"]'), function (index, node) {
        var clonedNode = node.cloneNode(true);
        $(clonedNode).attr('y', 10);
        $(node).before(clonedNode);
    });
}
于 2014-07-01T05:11:43.037 に答える