値に応じてハイチャートのデータラベルを配置することはできますか？

Question

私は棒グラフを表示するためにハイチャートを使用しています。棒グラフは2つの棒が重なって表示され、その右側にはデータラベルが表示され、正確な値が表示されます。

ここでの問題は、値が80％を超えると、ラベルがグラフからフレームにあふれていること、他のテキストを上書きして両方を読むことができなくなることです。ここで

は私plotOptionsです：

plotOptions: { 
      bar: { 
       groupPadding: 0.5, 
       pointWidth : 30, 
       borderWidth: 0, 
       dataLabels: { 
        enabled: true, 
        y:-5, 
        color:"black", 
        style: { 
         fontSize: "12px" 
        }, 
        formatter: function(){ 
         if(this.y > 80) 
         { 
          this.series.chart.options.plotOptions.bar.dataLabels.x -= 20; 
         } 
         if(this.series.name == "Tests OK") 
          return "Tests OK : <strong>"+Math.round(this.y*10)/10+"%</strong>"; 
         else 
          return "<br/>Tests Executed : <strong>"+Math.round(this.y*10)/10+"%</strong>"; 
        } 
       } 
      } 
     } 

私はthis.series.chart.options.plotOptions.bar.dataLabels.x -= 20;を使用して、私は外出先でのチャートオプションを編集できると思っていたが、これは動作しません。

確かに私はそのような問題に遭遇した最初の人ではありません。何か案が ？代わりの

this.series.chart.options.plotOptions.bar.dataLabels.x -= 20; 

はあなたが使用できるように見える

私は自分自身をこの一部を把握しようとしてきたおかげで

Answer 1

formatterの中からそうすることはできないようです。

しかし、チャートがレンダリング（ロード）された後に設定することができます。 load callbackでこの

$.each(chartObj.series[0].data, function(i, point) { 
    if(point.y > 100) { 
     point.dataLabel.attr({x:20}); 
    } 
}); 

のようなものを試してみてください（またはあなたがredraw callbackでそれを必要とする場合）。

例hereを参照してください。

Answer 2

... ...

this.series.options.dataLabels.x = -20; 

。 ..この時点では、必要に応じてデータの位置を変更できるように、データラベルの場所を識別できるかどうかを理解しようとしています。

Answer 3

Bheshの答えはx/y位置の問題を解決しますが、HighchartsはdataLabels（see the problem here）のスタイルプロパティの変更を無視します。ただし、データオブジェクトを通過させることにより、個々のポイントのスタイルを上書きすることができます

series: [{ data: [29.9, 106, { y: 135, dataLabels: { style: { fontSize: 20 } } }] 

example from Highcharts docs

私はHighchartsにオブジェクト全体を渡す前に、私のデータを反復処理することにより、動的なスタイルを取得することができましたレンダリングする。

Answer 4

ここで私は結局何をしましたか？ setTimeoutが必要な場合、またはdataLabelプロパティがポイントに存在しない場合：

formatter: function() { 
    var point = this.point; 
    window.setTimeout(function() { 
     if (point.s < 0) { 
      point.dataLabel.attr({ 
       y: point.plotY + 20 
      }); 
     } 
    }); 
    //this.series.options.dataLabels.y = -6; 
    var sty = this.point.s < 0 ? 'color:#d00' : 'color:#090;' //other style has no effect:(
    return '<span style="' + sty + '">' + Math.abs(this.point.s) + '</span>'; 
}