Highcharts双Y轴标签配置问题：右侧标签修改及对齐需求

我来帮你快速搞定这个右侧Y轴标签的配置问题！其实核心就是在Highcharts的配置里显式定义右侧Y轴的标题属性，并同步左侧的对齐规则，具体操作如下：

关键配置修改 #

你需要在图表配置中添加（或完善）yAxis数组，第二个元素对应右侧Y轴，设置它的标题文本和对齐方式：

Highcharts.chart('container', {
  // 重点：配置双Y轴，第一个是左侧，第二个是右侧
  yAxis: [
    {
      // 你已经完成的左侧Y轴配置，示例如下（根据你的实际代码调整）
      title: {
        text: 'Million Tonnes',
        align: 'high', // 假设你用了这个对齐方式，右侧要同步
        // 如果还有offset、rotation等样式，保留即可
      }
    },
    {
      opposite: true, // 必须设置为true，让Y轴显示在右侧
      title: {
        text: 'Recycling Rate (%)', // 修改为你需要的标签文本
        align: 'high', // 和左侧Y轴保持相同的对齐方式
        // 如果左侧有其他样式（比如offset），这里也要同步设置
      },
      // 如果需要右侧标签的样式和左侧一致，也可以在这里配置labels属性
      labels: {
        // 示例：和左侧相同的样式配置
        style: {
          color: '#2f7ed8' // 可以和左侧保持一致的颜色
        }
      }
    }
  ],
  // 你原有的chart配置（保留不变）
  chart: {
    events: {
      load: function() {
        var label = this.renderer.label("SOURCE: CEPI")
          .css({ width: '600px', fontSize: '1em', ... });
        // 你的其他加载事件代码
      }
    }
  },
  // 其他图表配置（比如series、title等，保留原有内容）
});

核心要点说明 #

1. yAxis数组结构：Highcharts支持多Y轴，数组的第一个元素对应左侧Y轴，第二个对应右侧（必须设置opposite: true）。
2. 标题对齐同步：把左侧Y轴title中的align属性（比如'high'）完全复制到右侧，就能保证两个标签的对齐方式一致。如果左侧还有offset（偏移量）、rotation（旋转角度）等样式，也要同步到右侧。
3. 覆盖默认文本：默认右侧Y轴标题是“Value”，通过设置title.text就能替换成你需要的内容。

这样修改后，右侧Y轴就会显示“Recycling Rate (%)”，并且和左侧标签保持相同的对齐样式啦！

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