Highcharts根据正值/负值对齐数据标签

Question

我正在生成条形图，并且当前所有数据标签均对齐到右侧。

对于正值，我希望数据标签对齐到栏的右侧，对于负值，我希望数据标签对齐栏的左侧。

我该如何做到这一点？

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'bar' 
     }, 
     xAxis: { 
      categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'] 
     }, 
     plotOptions: { 
      bar: { 
       dataLabels: { 
        enabled: true, 
        align: 'right', 
        inside: true 
       } 
      } 
     }, 
     series: [{ 
      data: [107, 31, 635, -203, -300] 
     }] 
    }); 
}); 

http://jsfiddle.net/tf2khzh2/1/

Answer 1

可能有相当多的方式来做到这一点。一种方法是设置点特定的dataLabels对象。根据您的数据，这可能直接完成的系列数据，这样的尺寸（JSFiddle）：

series: [{ 
    data: [107, 31, 635, { y: -203, dataLabels: { align: 'left' } }, { y: -300, dataLabels: { align: 'left' } }] 
}] 

或者你可以例如在您的系列和集初始化图表循环时使用的回调函数它以同样的方式，这样的（JSFiddle）：

$('#container').highcharts({ 
    series: [{ 
     data: [107, 31, 635, -203, -300] 
    }] 
    // ... 
}, function() { 
    for(var i = 0; i < this.series.length; i++) { 
     for(var j = 0; j < this.series[i].points.length; j++) { 
      var point = this.series[i].points[j]; 

      if(point.y < 0) { 
       point.update({ dataLabels: { align: 'left'} }, false); 
      } 
     } 
    } 

    this.redraw(); 
}); 

的另一种方法，我将只描述利用几个系列，一个用于正极和一个负，然后link them，并使用不同align规格为每系列。