具有多系列的单 y 轴，同一 y 轴上每个系列的最小值和最大值的刻度线，highchart

Question

具有多系列的单 y 轴，每个系列的最小值和最大值在同一 y 轴上的刻度线，高图。

刻度线应位于最顶部的第一个系列最大值，第二个顶部第二个系列最大值，依此类推...，同样，最小值应位于底部，依此类推...

我们如何在高图表中实现这一目标。附上图片以供需求参考。

尝试使用tickpositioner，但它不适用于具有相似或相同最大和最小数据点的系列。

Answer 1

使用单个 y 轴是不可能的，因为每个系列都有自己的比例。但是，您可以为每个系列生成一个单独的 y 轴（具有计算的极值和刻度位置），它看起来与图片中完全相同。

例如：

const series = [...];

const yAxis = series.map((s, index) => {
  const yData = s.data.map(el => el[1]);
  const dataMax = Math.max(...yData);
  const dataMin = Math.min(...yData);

  const col = 0 + Math.floor(index / cols);
  const row = index - rows * col;

  const diff = Math.abs(dataMax - dataMin);
  const step = diff / tickAmount;
  const realDiff = diff + step * Math.pow(row, 2);
  
  const min = dataMin - (realDiff / tickAmount * row);
  const max = dataMax + (realDiff / tickAmount * row);

  const tick1 = dataMin;
  const tick2 = dataMax;

  return {
    labels: {
      style: {
        color: s.color
      }
    },
    tickPositions: [tick1, tick2],
    min,
    max,
    startOnTick: false,
    endOnTick: false,
    title: null,
    offset: col * 30
  };
});

---

现场演示：https://jsfiddle.net/BlackLabel/dLykjzh1/

API 参考： https://api.highcharts.com/highcharts/yAxis