请求帮助：在Highcharts散点图各分区内绘制矩形

Hey Ahmed, nice work getting your Highcharts scatter chart set up with those dividing plot lines! I see you already had the label logic in place—let's extend that code to draw rectangles in each of the four quadrants created by your red lines.

How It Works #

We'll use Highcharts' renderer.rect() method to generate each rectangle. The key is calculating the correct position and dimensions for each quadrant using the plot line pixel positions and the chart's layout properties. Here's the updated code:

$(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); 

          // Add semi-transparent rectangles to each quadrant
          var rectAttr = {
            fill: 'rgba(0, 128, 255, 0.1)', // Soft blue with transparency
            stroke: 'rgba(0, 128, 255, 0.4)',
            'stroke-width': 1,
            zIndex: 5 // Keep rectangles behind labels and data points
          };

          // Top-left rectangle
          r.rect(left, top, xPlotLine, yPlotLine)
            .attr(rectAttr)
            .add();

          // Top-right rectangle
          r.rect(left + xPlotLine, top, w - xPlotLine, yPlotLine)
            .attr(rectAttr)
            .add();

          // Bottom-left rectangle
          r.rect(left, top + yPlotLine, xPlotLine, h - yPlotLine)
            .attr(rectAttr)
            .add();

          // Bottom-right rectangle
          r.rect(left + xPlotLine, top + yPlotLine, w - xPlotLine, h - yPlotLine)
            .attr(rectAttr)
            .add();

          // Render quadrant labels (your original logic)
          each(labels, function(label, i) { 
            chart.label[i] = r.text(label, 0, 0) 
              .attr(attr) 
              .css(labelStyles) 
              .add(); 
            bbox = chart.label[i].getBBox(); 

            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] 
    }] 
  }); 
});

Key Details to Note: #

• Rectangle Positioning: Each rectangle's coordinates are calculated using the chart's plotLeft/plotTop (plotting area origin) and the pixel positions of your dividing plot lines.
• Styling: The semi-transparent rgba fill ensures your data points and red labels remain visible. The zIndex values make sure rectangles sit behind labels and data.
• Label Logic: Your original label placement code stays exactly as you had it—we just added the rectangle rendering before it.

内容的提问来源于stack exchange，提问作者Muhammad AhmedRaza