如何实现带plotLines的Highcharts堆叠柱状图？隐藏Y轴Q1/Q2值

要实现隐藏Y轴上的Q1、Q2默认刻度，只保留自定义plotLines的标签，只需要两步关键配置：

1. 隐藏Y轴默认刻度 #

在你的Y轴配置中添加tickPositions: []，这个配置会告诉Highcharts不要生成任何默认的刻度线和刻度值，直接隐藏掉原来的Q1、Q2刻度。

2. 为plotLines添加自定义标签 #

给每个plotLine配置label属性，指定要显示的文本（比如'Q1'、'Q2'），并调整标签的位置使其对齐到Y轴旁，和原来的刻度位置一致。

完整配置示例（结合你的现有代码修改） #

Highcharts.chart('container', {
  chart: { 
    type: "column", 
    margin: [100, 120, 30, 100], 
    height: 440, 
    lineWidth: 0, 
    minorGridLineWidth: 0, 
    lineColor: "transparent" 
  },
  title: { 
    text: "", 
    align: "center", 
    x: -140, 
    y: 12, 
    floating: true 
  },
  // 重点修改Y轴配置
  yAxis: [
    {
      // 左侧Y轴
      tickPositions: [], // 隐藏默认刻度
      plotLines: [
        {
          value: 你的Q1数值, // 替换成实际的Q1值
          color: '#ccc',
          width: 1,
          label: {
            text: 'Q1',
            align: 'right',
            x: -10, // 调整位置让标签靠近Y轴
            y: 0,
            style: {
              color: '#333',
              fontSize: '12px'
            }
          }
        },
        {
          value: 你的Q2数值, // 替换成实际的Q2值
          color: '#ccc',
          width: 1,
          label: {
            text: 'Q2',
            align: 'right',
            x: -10,
            y: 0,
            style: {
              color: '#333',
              fontSize: '12px'
            }
          }
        }
      ]
    },
    {
      // 右侧Y轴
      opposite: true,
      tickPositions: [], // 隐藏默认刻度
      plotLines: [
        {
          value: 你的右侧Q1数值, // 替换成实际值
          color: '#ccc',
          width: 1,
          label: {
            text: 'Q1',
            align: 'left',
            x: 10, // 右侧轴标签要向右偏移
            y: 0,
            style: {
              color: '#333',
              fontSize: '12px'
            }
          }
        },
        {
          value: 你的右侧Q2数值, // 替换成实际值
          color: '#ccc',
          width: 1,
          label: {
            text: 'Q2',
            align: 'left',
            x: 10,
            y: 0,
            style: {
              color: '#333',
              fontSize: '12px'
            }
          }
        }
      ]
    }
  ],
  // 其他配置（series、xAxis等）保持不变
  series: [
    // 你的堆叠柱状图数据系列
  ]
});

关键细节说明 #

• tickPositions: []：这个配置是核心，它清空了Y轴的刻度位置数组，Highcharts就不会渲染任何默认刻度了。
• plotLine的label位置调整：左侧Y轴的标签用align: 'right'和负的x值，让标签贴在Y轴左侧；右侧Y轴用align: 'left'和正的x值，让标签贴在Y轴右侧，视觉上和原来的刻度位置一致。
• 样式自定义：可以通过label.style调整标签的字体、颜色等，匹配你的图表风格。

这样配置后，Y轴上就只会显示你定义的plotLines及其标签，原来的Q1、Q2默认刻度会被完全隐藏。

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