Highcharts 在每个highchart散点部分绘制矩形

这是js fiddle链接的示例

$(function() {
  $('#container').highcharts({
    chart: {
      events: {
        load: function() {
          var chart = this,
            r = chart.renderer,
            each = Highcharts.each,
            left = chart.plotLeft,
            top = chart.plotTop,
            h = chart.plotHeight,
            w = chart.plotWidth,
            xAxis = chart.xAxis[0],
            yAxis = chart.yAxis[0],
            labels = ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
            labelStyles = {
              'font-size': '12px',
              'color': 'red'
            },
            attr = {
              zIndex: 10
            },
            xPlotLine, yPlotLine,bbox, x, y;

          chart.label = [];
                    
          xPlotLine = xAxis.toPixels(xAxis.plotLinesAndBands[0].options.value);
          yPlotLine = yAxis.toPixels(yAxis.plotLinesAndBands[0].options.value);

                    
          //render
          each(labels, function(label, i) {
          
            chart.label[i] = r.text(label, 0, 0)
              .attr(attr)
              .css(labelStyles)
              .add();
              
            bbox = chart.label[i].getBBox();
              console.log(w);
            switch(i) {
                case 0:
                x = ((xPlotLine + left) / 2) - (bbox.width / 2);
                y = ((yPlotLine + top) / 2) - (bbox.height / 2);
                break;
              case 1:
                x = left + xPlotLine + ((w - xPlotLine)/2) - (bbox.width / 2);
                y = ((yPlotLine + top) / 2) - (bbox.height / 2);
                break;
              case 2:
                x = ((xPlotLine + left) / 2) - (bbox.width / 2);
                y = top + yPlotLine + ((h - yPlotLine) / 2) - (bbox.height / 2);
                break;
              case 3:
                x = left + xPlotLine + ((w - xPlotLine)/2) - (bbox.width / 2);
                y = top + yPlotLine + ((h - yPlotLine) / 2) - (bbox.height / 2);
                break;
            }
            
            chart.label[i].attr({
                x: x,
              y: y
            });
          });

        }
      }
    },
    xAxis: {
      plotLines: [{
        id: 'ver',
        color: '#FF0000',
        width: 2,
        value: 2
      }]
    },
    yAxis: {
      plotLines: [{
        id: 'hor',
        color: '#FF0000',
        width: 2,
        value: 100
      }]
    },

    series: [{
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
  });
});


http://jsfiddle.net/x1zna57a/

---

我想在每个分区中画一个矩形，请帮我解决这个问题。

我想你可以用多边形系列来画那些矩形。此解决方案的优点是，这将保持图表和矩形的响应速度

演示：

---

API:

如果您想让人们自己解决您的问题，请考虑将此发布到拼图堆栈交换上。在这里，大多数人愿意回答具体问题。用清晰的问题陈述你的问题被认为是你的任务。

series: [{
  type: 'polygon',
  data: [
    [0, 0],
    [2, 0],
    [2, 100],
    [0, 100]
  ],
  enableMouseTracking: false,
  color: 'gray'
}, {
  type: 'polygon',
  data: [
    [0, 100],
    [2, 100],
    [2, 250],
    [0, 250]
  ],
  enableMouseTracking: false,
  color: 'gray'
}, {
  type: 'polygon',
  data: [
    [2, 0],
    [11, 0],
    [11, 100],
    [2, 100]
  ],
  enableMouseTracking: false,
  color: 'gray'

}, {
  type: 'polygon',
  data: [
    [2, 100],
    [11, 100],
    [11, 250],
    [2, 250]
  ],
  enableMouseTracking: false,
  color: 'gray'

}, {
  data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]