Highcharts实现多系列独立Y轴：不共享Y轴刻度值方案

嘿，作为Highcharts新手，想要让每个系列用独立Y轴其实超简单！咱们直接修改你的配置就能搞定，核心思路是给每个系列分配专属的Y轴，每个轴会自动根据对应系列的数据计算刻度范围，完全不会和其他轴共享。

具体修改步骤： #

1. 把单一Y轴改成数组配置：原来的yAxis是单个对象，现在改成数组，每个元素对应一个系列的Y轴，你可以自定义每个轴的标题、位置、样式等。
2. 给每个系列指定对应的Y轴索引：在series数组的每个对象里添加yAxis属性，值为对应Y轴在数组里的索引（从0开始）。

修改后的完整配置代码： #

this.chartOptions = {
  lang: {
    loading: 'Cargando...',
    viewFullscreen:"Ver en pantalla completa",
    months: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Augosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
    weekdays: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"],
    shortMonths: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
    shortWeekdays: undefined,
    exportButtonTitle: "Exportar",
    printButtonTitle: "Importar",
    rangeSelectorFrom: "Desde",
    rangeSelectorTo: "Hasta",
    rangeSelectorZoom: "Período",
    downloadPNG: 'Descargar imagen PNG',
    downloadJPEG: 'Descargar imagen JPEG',
    downloadPDF: 'Descargar imagen PDF',
    downloadSVG: 'Descargar imagen SVG',
    printChart: 'Imprimir',
    resetZoom: 'Reiniciar zoom',
    resetZoomTitle: 'Reiniciar zoom',
    thousandsSep: ",",
    decimalPoint: '.'
  },
  global: { useUTC: true },
  chart: { type: "line" },
  title: { text: "" },
  legend: { enabled: true },
  exporting: { enabled: true },
  time: { useUTC: false },
  tooltip: {
    formatter: function () {
      return new Date(this.x).toLocaleString('es-ES') + '<br><b>Valor: </b>' +
        '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: <b>' +
        Highcharts.numberFormat((this.y), 2, '.') + ' </b><br/>'
    },
  },
  credits: { enabled: false },
  xAxis: { type:"datetime" },
  // --- 这里是修改的Y轴部分 ---
  yAxis: [
    {
      title: { text: "太阳辐射" }, // 第一个系列的轴标题
      opposite: false // 放在左侧，默认位置
    },
    {
      title: { text: "电池电量" }, // 第二个系列的轴标题
      opposite: true, // 放在右侧，避免和左侧轴重叠
      offset: 60 // 如果多个轴在同一侧，用offset错开位置
    }
    // 如果有更多系列，继续添加新的Y轴对象即可
  ],
  // --- Y轴修改结束 ---
  responsive: {
    rules: [{
      condition: { maxWidth: 500 },
      chartOptions: {
        chart: { height: 300 },
        subtitle: { text: null },
        navigator: { enabled: false }
      }
    }]
  },
  // --- 这里修改系列配置，给每个系列指定Y轴索引 ---
  series: this.multi.map((item, index) => ({
    ...item,
    yAxis: index // 每个系列对应数组中索引相同的Y轴
  }))
};

关键说明： #

• 每个Y轴会自动根据对应系列的数据范围计算刻度，所以像你看到的例子那样，数值75的太阳辐射和4.16的电池电量会各自使用适配自己的刻度，不会出现共享刻度导致的显示错位问题。
• 如果不想显示某些Y轴的轴线/刻度，可以在对应Y轴对象里添加visible: false，只保留数据系列的显示。
• 要是多个轴放在同一侧，用offset属性调整它们的位置，避免重叠。

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