Highcharts - angularjs

Question

Ben highchart ve açısal ile çalışıyorum ve bu örnek benim grafiğin içini dikdörtgenler çizmek için takip ediyorum ile dikdörtgen çizim: 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)'); 

Bu (resim) verir bilmiyorum sorun nedir ! herhangi bir yardım lütfen! yorumlarda

Answer 1

, size piksel ile çalışmak istemiyorum demek, ama zaten yok. Mantığı biraz değiştirmelisiniz: piksel kullanmayın, sadece x/yAxis üzerinde sayısal değerleri kullanın. Ardından, grafikte piksel konumunu elde etmek için Axis.toPixels() yöntemini kullanın. Örneğin: 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)'); 
    } 
} 

Ben Highcharts-ng func çalışır, ancak benim için kırık bilmiyorum, bu yüzden yerine chart.events.redraw() geri arama kullanıyorum:

$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 
    } 
}