ハイチャートは正負の値に基づいてデータラベルを整列する

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

は、おそらくこれを行うにはかなりの数の方法があります。 1つの方法は、ポイント固有のdataLabelsオブジェクトを設定することです。

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

またはあなたのシリーズとセットでループにグラフを初期化するときに、たとえば、コールバック関数を使用することができます：あなたのデータのサイズによっては、これは、この（JSFiddle）のように、系列データ上で直接行うことができますまた同様に、のようなこの（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(); 
}); 

私はいくつかのシリーズ、正用と負のための1つを使用して説明し、その後link themを、それぞれに異なるalign仕様を使用する代替的なアプローチシリーズ。