剑道条形图系列标签在顶部?

use*_*903 4 kendo-ui kendo-chart kendo-dataviz

如何更改kendo条形图 - 系列标签定位?考虑以下小提琴:http://jsfiddle.net/ZPUr4/149/

在图表中,对于正值,条形值位于顶部,对于负值,条形值位于底部.

如何将系列标签值定位在条形图的顶部以获得正值和负值?

如果条形值变化,如何将所有标签值放在同一水平线上?

如果我的问题不明确,请告诉我.

以下是HTML代码:

    <div id="example" class="k-content">
    <div id="chart"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

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;
    });
Run Code Online (Sandbox Code Playgroud)

谢谢.

Ona*_*Bai 6

为了指定值在顶部,您应该使用:

labels: {
    visible: true,
    position: "top"
}
Run Code Online (Sandbox Code Playgroud)

但有了这个,你必须放置数里面吧.为了将它移到外面,你需要做:

labels: {
    visible: true,
    position: "top",
    padding: {
        top: -20
    }
}
Run Code Online (Sandbox Code Playgroud)

添加padding.top20pix的地方就足够了.

你在这里修改了JSFiddle:http://jsfiddle.net/OnaBai/ZPUr4/178/