如何通过Highcharts JS修改特定Y轴（如Y=150）线条颜色？

完全可以修改特定数值对应的Y轴刻度线颜色，以下是两种实用方案：

• 方案一：通过plotLines添加自定义线条
  直接在Y轴配置中添加plotLines，指定目标数值、颜色等属性，覆盖原刻度线：

  yAxis: {
    plotLines: [{
      value: 150, // 目标Y轴数值
      color: '#ff0000', // 自定义颜色
      width: 2, // 线条宽度，匹配原刻度线粗细
      zIndex: 5 // 确保层级高于原刻度线
    }]
  }
  

• 方案二：通过render事件动态修改
  利用图表的render事件，遍历Y轴刻度元素，匹配目标数值后修改其样式：

  chart: {
    events: {
      render: function() {
        const targetValue = 150;
        const yAxis = this.yAxis[0];
        yAxis.ticks.forEach(tick => {
          if (tick.pos === targetValue) {
            tick.mark.attr({
              stroke: '#ff0000'
            });
          }
        });
      }
    }
  }
  

两种方案对比：方案一适合固定数值的场景，配置简单；方案二更灵活，适合需要动态调整目标数值的场景。

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