Синхронизация тиков на нескольких независимых осях

Я работаю над диаграммой с 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,
    },
  ],

График с ложным масштабированием, но с отметкой

Есть ли решение для синхронизации тиков и получения правильного масштабирования, как на графике во второй скрипке, где 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,
    },
  ],

График с синхронизацией тиков, но ложным масштабированием

(фиолетовая, коричневая и оранжевая серия относится к левой оси | синяя серия относится к правой оси)

Я искал решение в течение нескольких дней. Надеюсь, вы сможете мне помочь.

Всего 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


Есть идеи?

10000