如何在HighChart插件的行之间保持y轴标签

时间:2013-05-13 08:43:52

标签: javascript jquery charts highcharts

我正在使用this插件来创建图表。

我有这个:enter image description here

这就是我想要的:

enter image description here

我该怎么做?任何引用??

这是我的图表代码

$(function () 
{
    $('#container').highcharts({
        chart: {
            type: 'column',
            margin: [ 100]
        },
        title: {
            text: 'World\'s largest cities per 2008'
        },
        xAxis: {
            categories: personNameList,
            labels: {
                rotation: -45,
                align: 'right',
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Population (millions)'
            }
        },
        legend: {
            enabled: false
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.x +'</b><br/>'+
                    'Population in 2008: '+ Highcharts.numberFormat(this.y, 1) +
                    ' millions';
            }
        },
        series: [{
            name: 'Population',
            data: dataList,
            dataLabels: {
                enabled: true,
                rotation: -90,
                color: '#FFFFFF',
                align: 'right',
                x: 4,
                y: 10,
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        }]
    });
});

1 个答案:

答案 0 :(得分:0)

以下是实现此目的的一种方法:

在highcharts对象中的labels对象中,设置y位置,并像这样摆脱'0':

labels: {
    formatter: function() {
        if (this.value != 0) {
            return this.value; 
        } else {
            return '';
        }
    },
    y: 40
}

使用此属性,您可以更改每个标签所在的位置[向上或向下]。唯一的缺点是应该删除y轴上的0。

Here is a fiddle