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

Question

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

我有这个 ：

这就是我想要的：

我怎样才能做到这一点？有参考吗？？

这是我这张图表的代码

$(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'
                }
            }
        }]
    });
});

Answer 1

这是实现此目的的一种方法：

在labelshighcharts 对象中的对象中，设置 y 位置，然后像这样去掉“0”：

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

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

这是一个小提琴