Highcharts多系列数据下Y轴标签重叠问题求解

以下是几种实用的解决方案，针对多系列图表Y轴标签重叠问题：

• 调整Y轴间距与位置
  通过设置yAxis.offset属性为不同数值，让多个Y轴错开排列，从物理空间上避免标签重叠。示例代码：

  yAxis: [{
    offset: 0,
    // 其他Y轴配置项
  }, {
    offset: 40,
    // 其他Y轴配置项
  }, {
    offset: 80,
    // 其他Y轴配置项
  }]
  

• 旋转Y轴标签
  给Y轴标签添加旋转角度，减少横向占用空间，避免挤压重叠。设置yAxis.labels.rotation调整角度，比如旋转-45度：

  yAxis: {
    labels: {
      rotation: -45
    }
  }
  

• 优化标签样式与字体
  缩小标签字体大小，或调整对齐方式来节省空间。比如设置更小的字号，配合右对齐优化显示：

  yAxis: {
    labels: {
      style: {
        fontSize: '10px'
      },
      align: 'right'
    }
  }
  

• 启用标签自动换行
  通过yAxis.labels.useHTML开启HTML渲染，结合CSS强制标签换行，适配过长标签的显示：

  yAxis: {
    labels: {
      useHTML: true,
      formatter: function() {
        return '<div style="width:60px;word-wrap:break-word;">' + this.value + '</div>';
      }
    }
  }
  

• 加宽图表容器
  如果图表容器宽度不足，可适当调整容器宽度，给Y轴标签留出足够的显示空间。示例CSS：

  #container {
    width: 1000px;
    margin: 0 auto;
  }
  

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