Syn c тикает на нескольких независимых осях - PullRequest
Новая
       89

Syn c тикает на нескольких независимых осях

1 голос
/ 12 февраля 2020

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

Диаграмма с ложным масштабированием, но отметка syn c

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

Диаграмма с тиковым син c, но с ложным масштабированием

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

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

1 Ответ

1 голос
/ 12 февраля 2020

Вы можете вручную рассчитать и установить 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

...