0

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

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

我想上下显示数据标签（例如在线上方显示点一月/三月/五月，在线下方显示点（二月/四月/六月）。有人知道如何实现这一点吗？

谢谢。

4

1 回答 1

5

实现这一点的一种方法是通过将每个点的 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});
    }
});

另一个小提琴示例

于 2013-10-04T21:12:25.880 回答