Добавить прямоугольник в highchart

Question

Im пытается добавить ящик (Html ​​или что-то еще) между набором y & x cordinates в диаграмме графика. В основном ящик между x20 & y25, но не могу найти числа, чтобы исчислить правильную ширину & высоту ящика или установить правильные х, у корни для размещения коробки. Попробовал визуализировать прямоугольник и метку в качестве примера скрипта, но просто не получает ее.

http://jsfiddle.net/qnp5tg0h/

var chart = new Highcharts.Chart(options); 

chart.renderer.label('1,99 %', chart.xAxis[0].left,265) 
        .attr({ 
         r: 0, 
         width: 97, 
         height: 66, 
         fill: 'blue' 
        }) 
        .css({ 
         color: 'white', 
         fontWeight: 'bold' 
        }) 
        .add(); 
     }); 

Answer 1

Решение заключается в использовании chart.x/yAxis[0].toPixels(value). Это будет переводить из значения на графике, в позицию пикселя: http://jsfiddle.net/qnp5tg0h/1/

 var chart = new Highcharts.Chart(options); 

     var x1 = chart.xAxis[0].toPixels(0), 
      x2 = chart.xAxis[0].toPixels(20), 
      y1 = chart.yAxis[0].toPixels(0), 
      y2 = chart.yAxis[0].toPixels(25); 

     chart.renderer.rect(x1, y2, x2 - x1, y1 - y2) 
      .attr({ 
      fill: 'blue' 
     }).add(); 

Я рендеринг только прямоугольник, потому что этикетка может иметь некоторые дополнительные прокладки, которые будут портить Прямоугольник. Теперь так же добавьте текст, используя метод chart.renderer.text().

ПРИМЕЧАНИЕ: Точка (0,0) в SVG - верхний левый угол окна просмотра.