Highchartsグラフにテキストと円を動的に配置しますか？

Question

私のグラフィックにいくつかのテキストを配置したい。さて、xy座標を指定することで、これを手動で行うことができます。しかし、グラフのサイズが変わる可能性があり、その位置がハードコードされているため、これはおそらく最良の方法ではありません。

動的な方法で線の位置を導き出す方法はありますか？つまり、位置x = 1980のx/y座標は何ですか？それのためのHere is a fiddle。

options.series.push(series); 

    options.chart.events = { 
     load: function() { 
     var chart = this; 
     chart.renderer.text('1970: Arbitrary chosen reference year: All cumulative values are relative to 1970.', xOffset, yOffset) 
      .css({ 
      fontSize: '13px', 
      color: '#aaa', 
      width: '550px' 
      }) 
      .add(); 

     chart.renderer.text('1980: observed loss in glacier thickness cumulates to 2 m w.e. since 1970.', 520, 220) 
      .css({ 
      fontSize: '13px', 
      color: '#7994d9', 
      width: '520px' 
      }) 
      .add(); 


     chart.renderer.text('1990: cumulative ice loss of 4 m w.e.', 690, 255) 
      .css({ 
      fontSize: '13px', 
      color: '#ff6c7f', 
      width: '320px' 
      }) 
      .add(); 

     } 

Answer 1

多分これはあなたを助けることができる：

var points = chart.series[1].points; 
for(var i = 0; i < points.length; i++) { 
    var point = points[i]; 
    if(point.x === 1980) { 
    console.log(point.plotX); //263.51049191606 
    console.log(point.plotY); //40.81559999999999 
    } 
} 

UPDATE配列に翻訳された場所の追加1

：

var locations = []; 
var points = chart.series[1].points; 
for(var i = 0; i < points.length; i++) { 
    var point = points[i]; 
    if(point.x === 1980 || point.x === 1990) { 
    locations.push({ 
     x: point.plotX + chart.yAxis[0].left, 
     y: point.plotY + chart.yAxis[0].top 
    }); 
    } 
} 

更新fiddle