求助：如何在Highcharts中绘制正方形及水平线？

Hey there! Let’s focus on your top priority first: drawing squares in Highcharts. It’s totally doable using Highcharts’ built-in renderer API, which lets you add custom SVG shapes directly to your chart. Here’s a step-by-step breakdown with code examples:

一、绘制自定义正方形（核心实现） #

Highcharts’ renderer.rect() method is your go-to for drawing squares (or rectangles). The key is to make sure the square aligns correctly with your chart’s data or axes—here are two common scenarios:

1. 基于数据点位置绘制正方形（比如标记最高点） #

If you want the square to sit on a specific data point (like your chart’s highest value), you can fetch the point’s pixel coordinates and center the square around it:

Highcharts.chart('container', {
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
  },
  yAxis: {
    min: 0,
    max: 100
  },
  series: [{
    name: 'Sample Data',
    data: [22, 45, 68, 72, 95]
  }],
  chart: {
    events: {
      load: function() {
        const renderer = this.renderer;
        const series = this.series[0];
        
        // 找到数据中的最高点
        const maxPoint = series.data.reduce((prev, curr) => curr.y > prev.y ? curr : prev, series.data[0]);
        
        // 将数据点的相对坐标转换为图表的绝对像素坐标
        const squareSize = 40; // 正方形边长
        const x = maxPoint.plotX + this.plotLeft - squareSize / 2;
        const y = maxPoint.plotY + this.plotTop - squareSize / 2;
        
        // 绘制正方形并设置样式
        renderer.rect(x, y, squareSize, squareSize, 0)
          .attr({
            fill: 'rgba(255, 99, 71, 0.3)', // 半透明填充色
            stroke: '#ff6347', // 边框颜色
            'stroke-width': 2, // 边框宽度
            zIndex: 10 // 确保正方形显示在数据点上方
          })
          .add();
      }
    }
  }
});

2. 基于坐标轴固定位置绘制正方形 #

If you need the square at a fixed axis position (e.g., x="Mar", y=70), use toPixels() to convert axis values to pixel coordinates:

// 在chart.load事件中添加：
const xPixel = this.xAxis[0].toPixels('Mar');
const yPixel = this.yAxis[0].toPixels(70);
const squareSize = 50;

renderer.rect(xPixel - squareSize/2, yPixel - squareSize/2, squareSize, squareSize, 0)
  .attr({ fill: 'rgba(100, 149, 237, 0.4)', stroke: '#6495ed' })
  .add();

二、水平线优化（补充方案） #

Since you already have a basic idea for horizontal lines, here are two ways to refine them based on common needs:

1. 贯穿整个图表的全局水平线（用plotLines） #

For a line that spans the entire chart width at a specific y-value:

yAxis: {
  plotLines: [{
    value: 50, // 水平线对应的y轴数值
    color: '#2ecc71',
    width: 2,
    label: {
      text: 'Threshold',
      align: 'right',
      x: -10
    },
    zIndex: 5
  }]
}

2. 局部范围的水平线（用renderer.path） #

If you only want the line between two x-axis points:

// 在chart.load事件中添加：
const startX = this.xAxis[0].toPixels('Feb');
const endX = this.xAxis[0].toPixels('Apr');
const yPos = this.yAxis[0].toPixels(50);

renderer.path(['M', startX, yPos, 'L', endX, yPos])
  .attr({ stroke: '#f39c12', 'stroke-width': 3, dashstyle: 'shortdash' })
  .add();

If you need the square to adapt to chart resizing, or have specific styling/positioning requirements, just share more details and I can tweak the code further!

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