Question

我有以下代码fiddle link：

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

我想上下显示dataLabels（例如，显示点上方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 } }
        ]        
    }]

Fiddle example

上述快速解决方案适用于静态数据，但如果有大量数据则很繁琐。并且它无法动态更改数据标签。所以这是另一种更通用的解决方案。它在渲染图表后设置数据标签。

$.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});
    }
});

Another fiddle example

高图数据标签不同的位置

1 个答案: