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規格爲每系列。