Highcharts - рисунок прямоугольника с angularjs

Question

Я работаю с highchart и угловатой, и я в этом пример для рисования прямоугольников в моей схеме: http://jsfiddle.net/Lh74L8vu/23/

drawSquare(139.42857142857144,216.73333333333335, 28.97142857142856,11.039999999999992,'rgba(130,215,169,.4)'); 

     drawSquare(139.42857142857144, 171.34666666666666, 144.85714285714283, 45.386666666666684,'rgba(255,223,134,.4)'); 
    drawSquare(168.4, 216.73333333333335, 115.88571428571427, 11.039999999999992,'rgba(255,223,134,.4)'); 

     drawSquare(139.42857142857144, 116.14666666666668, 289.7142857142857, 55.19999999999999,'rgba(255,102,102,.4)'); 
    drawSquare(284.2857142857143, 171.34666666666666, 144.8571428571429, 56.42666666666668,'rgba(255,102,102,.4)'); 

Это дает это (фото) Я не знаю, в чем проблема ! любая помощь пожалуйста !!

Answer 1

В комментариях, вы говорите, что вы не хотите работать с пикселями, но вы уже делаете. Я думаю, вы должны немного изменить логику: не используйте пиксели вообще, просто используйте числовые значения для x/yAxis. Затем используйте метод Axis.toPixels(), чтобы получить положение пикселя на диаграмме. Например: http://jsfiddle.net/c57L3cj2/3/

function myRedraw (e) { 
    var chart = this; 
    if (!chart.rects) { 
    var drawSquare = function(x1, y2, width, height, color) { 
     var y_px = chart.yAxis[0].toPixels(y2) - height, 
     x_px = chart.xAxis[0].toPixels(x1); 

     chart.renderer.rect(x_px, y_px, width, height, 0) 
     .attr({ 
      fill: color, 
      zIndex: 0 
     }) 
     .add(); 
    }; 
    chart.rects = true; 
    drawSquare(5, 0, 28.97142857142856, 11.039999999999992, 'rgba(130,215,169,.4)'); 
    } 
} 

Я не знаю, как func работает в Highcharts-нг, но для меня это не работает, поэтому я использую chart.events.redraw() обратного вызова вместо:

$scope.config1 = { 
    options: { 
    chart: { 
     events: { 
     redraw: myRedraw 
     } 
    } 
    }, 
    series: [{ 
    data: [ 
     [5, 1.258], 
     [30, 114] 
    ] 
    }], 
    xAxis: { 
    min: 0, 
    max: 35, 
    tickInterval: 5 
    }, 
    yAxis: { 
    min: 0, 
    max: 120, 
    tickInterval: 20 
    } 
}