高图表数据标签不同位置

Question

我有以下代码的小提琴链接：

$(function () {
$('#container').highcharts({
    chart: {
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    plotOptions: {
        series: {
            dataLabels: {
                align: 'left',
                enabled: true,
                rotation: 270,
                x: 2,
                y: -10
            }
        }
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
    }]
  });
});

我想上下显示数据标签（例如，在线上方显示 1 月/3 月/5 月的点，显示线下方的点（2 月/4 月/6 月）。有人知道如何实现这一目标吗？

谢谢。

Answer 1

实现此目的的一种方法是通过数据对象传递每个点的 x、y 位置：

series: [{
        data: [
            { y: 29.9, dataLabels: { x: 0, y: 30 } }, 
            { y: 71.5, dataLabels: { x: 0, y: -10 } }, 
            { y: 106.4, dataLabels: { x: 0, y: 40 } }, 
            { y: 129.2, dataLabels: { x: 0, y: -10 } }, 
            { y: 144.0, dataLabels: { x: 0, y: 30 } }, 
            { y: 176.0, dataLabels: { x: 0, y: -10 } }, 
            { y: 135.6, dataLabels: { x: 0, y: 30 } }, 
            { y: 148.5, dataLabels: { x: 0, y: -10 } }, 
            { y: 216.4, dataLabels: { x: 0, y: 40 } }, 
            { y: 194.1, dataLabels: { x: 0, y: -10 } }, 
            { y: 95.6, dataLabels: { x: 0, y: 30 } },
            { y: 54.4, dataLabels: { x: 0, y: -10 } }
        ]        
    }]

小提琴示例

上述快速解决方案适用于静态数据，但如果数据很多，则很乏味。而且它不能动态更改数据标签。所以这是另一个更通用的解决方案。它在呈现图表后设置数据标签。

$.each(chartObj.series[0].data, function(i, point) {
    console.log('point: ', point);
    if(i % 2 == 0) {
        point.dataLabel.attr({y: point.dataLabel.y - 15});
    } else {
        point.dataLabel.attr({y: point.dataLabel.y + 35});
    }
});

另一个小提琴的例子