同步多个独立轴上的刻度

Question

我正在处理带有2个独立y轴的图。左边的一个带有温度数据，右边的一个带有湿度数据。我想使右边的刻度线与左边的刻度线和网格线同步。

我已经通过tickPixelInterval实现了同步，但是仅在启用startOnTick和endOnTick的情况下。但是不幸的是，这会缩小系列。

https://jsfiddle.net/chartman2000/wLrf9s7x/5/

    yAxis: [
    {
      // startOnTick: false,
        // endOnTick: false,
      gridLineWidth: 1,
      gridLineDashStyle: 'Dash',
      lineWidth: 1,
      lineColor: '#ea0016',
      labels: {
        format: '{value}°C',
      },
      tickPixelInterval: 300 / 5,
      min: 3,
      max: 25
    },
    {
        // startOnTick: false,
      // endOnTick: false,
      gridLineWidth: 0,
      lineWidth: 1,
      lineColor: '#008ecf',
      title: {
        rotation: -90,
      },
      labels: {
        format: '{value}%',
      },
      opposite: true,
      tickPixelInterval: 300 / 5,
      min: 23,
      max: 25.8,
    },
  ],

Chart with false scaling but tick sync

是否有一种解决方法可以使刻度线同步并获得正确的缩放比例，如第二个小提琴中的图表所示，其中禁用了endOnTick和startOnTick？

https://jsfiddle.net/chartman2000/wLrf9s7x/

   yAxis: [
    {
      startOnTick: false,
        endOnTick: false,
      gridLineWidth: 1,
      gridLineDashStyle: 'Dash',
      lineWidth: 1,
      lineColor: '#ea0016',
      labels: {
        format: '{value}°C',
      },
      tickPixelInterval: 300 / 5,
      min: 3,
      max: 25
    },
    {
        startOnTick: false,
      endOnTick: false,
      gridLineWidth: 0,
      lineWidth: 1,
      lineColor: '#008ecf',
      title: {
        rotation: -90,
      },
      labels: {
        format: '{value}%',
      },
      opposite: true,
      tickPixelInterval: 300 / 5,
      min: 23,
      max: 25.8,
    },
  ],

Chart with tick sync but false scaling

（（紫色，棕色和橙色系列属于左轴|蓝色系列属于右轴）

我一直在寻找解决方案的日子。希望你能帮助我。

Answer 1

您可以手动计算并设置tickPositions：

yAxis: [{
  ...,
  tickPositions: [5, 10, 15, 20, 25],
  min: 3,
  max: 25
}, {
  ...,
  tickPositions: [23.2545, 23.8911, 24.5274, 25.1637, 25.8],
  min: 23,
  max: 25.8,
}]

---

实时演示： https://jsfiddle.net/BlackLabel/n9xhsqfb/1/

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