1

データ ラベルが有効になっている Highcharts グラフがあります。デフォルトでは、データ ラベルは各データ バーの最後に付けられます (このフィドルを参照してください: http://jsfiddle.net/cyphun/NHCvW )。

負のデータ ラベルを移動して、バーの端ではなく x 軸の横に表示することはできますか? これは、私がやりたいことのスクリーンショットです。

http://cl.ly/image/2G3F0I2l2m1z

これが私のハイチャートのサンプルコードのコピーです:

$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column'
            },
           plotOptions: {
                column: {
                    dataLabels: {
                        enabled: true,
                        useHTML: true,
                        style: {
                            color: '#252525',
                            fontWeight: 'bold'
                        }
                    }
                }
            },
            title: {
                text: 'Column chart with negative values'
            },
            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            },
            tooltip: {
                formatter: function() {
                    return ''+
                        this.series.name +': '+ this.y +'';
                }
            },
            credits: {
                enabled: false
            },
            series: [{
                name: 'Jane',
                data: [2, -2, -3, 2, 1]
            }]
        });
    });

});

助けてくれてありがとう!

4

1 に答える 1

1

これは、stackLabels を使用し、dataLabels の y (位置 y) 属性を設定していくつかのトリックを行うことで実現できます。また、dataLabels の verticalAlign を「top」に設定する必要があります。

plotOptions: {
    column: {
        dataLabels: {
            enabled: true,
            useHTML: true,
            style: {
                color: '#252525',
                fontWeight: 'bold'
            },
            verticalAlign : 'top',
            y: -15
        }
    }
}

デモ: http://jsfiddle.net/NHCvW/49/

于 2013-01-15T08:14:04.473 に答える