Highcharts - 使用angularjs绘制矩形

Question

我正在使用highchart和angular，我正在按照这个例子在我的图表中绘制矩形：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-ng中是如何工作的，但对我来说它已经坏了，所以我正在使用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
  }
}