Text und Kreis im Highcharts-Diagramm dynamisch positionieren?

Question

Ich möchte ein paar Textstücke in meine Grafik einfügen. Nun kann ich das manuell tun, indem ich die XY-Koordinaten festlege. Dies ist jedoch wahrscheinlich nicht der beste Weg, da sich die Größe des Diagramms ändern kann und die Positionen fest codiert sind.

Gibt es eine Möglichkeit, die Positionen einer Linie auf dynamische Weise abzuleiten? Das heißt: Was ist die x/y-Koordinate der Position x = 1980? Here is a fiddle dafür.

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

Vielleicht können diese Ihnen helfen:

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

übersetzt Standorte zu einem Array hinzu:

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 
    }); 
    } 
} 

Aktualisiert fiddle