Highcharts: разные интервалы тиков на одной оси

Question

У меня есть ряд, состоящий из:

1. Суточные значения, до определенной даты
2. 6-месячные значения, начиная с этой даты

Я бы хотел увеличить интервал между галочками исключительно для второй части графика, чтобы я мог сжимать данные.Чтобы было ясно, я хочу, чтобы тот же пробел , который представляет один месяц в левой части графика, представляет 6 месяцев в правой части.

Я не уверен, что Highcharts позволяет это ... Я думаю, что может быть два разных подхода:

1. Создать две серии с двумя разными осями иустановить одну ось за другой
2. установить разные значения tickInterval для этой же оси.

Использование tickPositions и tickPositioner Мне удалось только показать больше или меньше тиков, но всегда сохранять их положениена оси времени.

Это мой код:

Highcharts.chart('container', {
    chart: {
  zoomType: 'xy',
  animation: false
},
    title: {
    text: 'Some data'
},
    legend: {
        verticalAlign: 'bottom',
        borderWidth: 0
    },
    xAxis: {
        type : 'datetime',
        tickInterval: 30 * 24 * 3600 * 1000,
        labels: {
            useHTML: true,
            rotation: -90
        },
        dateTimeLabelFormats: { // don't display the dummy year
            month: '%b-%y',
            year: '%Y'
        },
        plotLines: [{
            color: 'gray',
            dashStyle: 'longdashdot',
            value: 1536278400000,
            width: 1,
            label: {
                text: 'Selected Date'
            }
        }]
    },
    yAxis: {
        title: {
            text: null
        },
        maxZoom: 0.1
    },
    series: jsonData

});

Вот jsfiddle с подмножеством моих исходных данных.

Какой лучший способ добиться этого?

Answer 1

Highcharts не разрешает его по умолчанию, но вы можете использовать обходной путь. Вы можете создать два xAxis с правильной пропорцией размера и две серии, как в примере ниже:

xAxis: [{
  type: 'datetime',
  endOnTick: false,
  tickInterval: 30 * 24 * 3600 * 1000,
  max: 1536278400000,
  width: '65%',
  labels: {
    useHTML: true,
    rotation: -90
  },
  dateTimeLabelFormats: { // don't display the dummy year
    month: '%b-%y',
    year: '%Y'
  },
  plotLines: [{
    color: 'gray',
    dashStyle: 'longdashdot',
    value: 1536278400000,
    width: 1,
    label: {
      text: 'Selected Date'
    }
  }]
}, {
  min: 1536278400000,
  startOnTick: false,
  offset: 0,
  type: 'datetime',
  tickInterval: 180 * 24 * 3600 * 1000,
  labels: {
    useHTML: true,
    rotation: -90
  },
  dateTimeLabelFormats: { // don't display the dummy year
    month: '%b-%y',
    year: '%Y'
  },
  width: '35%',
  left: '65%'
}]

Демонстрация в реальном времени: https://jsfiddle.net/BlackLabel/zxd4j5tn/