Наложение 2 серий данных разной длины на старшие диаграммы

Question

У меня есть 2 серии данных, где ось X - даты - 1 период за другим, например, 2 недели, а затем 2 недели.

Я хочу наложить 2 серии, хотя вторая серия еще не завершена. В настоящий момент вторая серия растягивает всю длину оси X, а не строит графики с одинаковыми интервалами и сопоставляет количество дней с серией 1.

    $(function() {
  $('#clicks').highcharts({
    chart: {
      type: 'line'
    },
    title: {
      text: 'Clicks'
    },
    yAxis: {
      title: {
        text: 'Clicks'
      },
      min: 0
    },
    xAxis: [{
      type: 'datetime',
      tickInterval: 30 * 24 * 3600 * 1000
    }, {
      type: 'datetime',
      tickInterval: 30 * 24 * 3600 * 1000
    }],
    series: [{
        name: 'Control Clicks',
        data: [
          [Date.UTC(2018, 2, 22), 2],
          [Date.UTC(2018, 2, 23), 0],
          [Date.UTC(2018, 2, 24), 0],
          [Date.UTC(2018, 2, 25), 1],
          [Date.UTC(2018, 2, 26), 1],
          [Date.UTC(2018, 2, 27), 2],
          [Date.UTC(2018, 2, 28), 0],
          [Date.UTC(2018, 2, 29), 0],
          [Date.UTC(2018, 2, 30), 1],
          [Date.UTC(2018, 2, 31), 2],
          [Date.UTC(2018, 3, 1), 0],
          [Date.UTC(2018, 3, 2), 0],
          [Date.UTC(2018, 3, 3), 0],
          [Date.UTC(2018, 3, 4), 0],
          [Date.UTC(2018, 3, 5), 2],
        ]
      },
      {
        name: 'Test Clicks',
        data: [
          [Date.UTC(2018, 3, 6), 0],
          [Date.UTC(2018, 3, 7), 0],
          [Date.UTC(2018, 3, 8), 0],
          [Date.UTC(2018, 3, 9), 2],
          [Date.UTC(2018, 3, 10), 2],
          [Date.UTC(2018, 3, 11), 0],
          [Date.UTC(2018, 3, 12), 1],
          [Date.UTC(2018, 3, 13), 1],
          [Date.UTC(2018, 3, 14), 0],
        ],
        xAxis: 1
      }
    ]
  });
});

https://jsfiddle.net/0yd6hucc/

Как я могу получить их для построения с одинаковыми интервалами по оси X?

Answer 1

Решение здесь состоит в том, чтобы вручную установить максимум на второй оси:

  events: {
    render: function() {
      if (renderEnabled) { // setExtremes() calls render event too - prevent infinite recursive loop
        var xAxes = this.xAxis,
          extremes = xAxes[0].getExtremes(),
          range = extremes.max - extremes.min;

        renderEnabled = false;
        xAxes[1].setExtremes(null, xAxes[1].getExtremes().min + range);
        renderEnabled = true;
      }

    }
  }

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

Ссылки API:

• https://api.highcharts.com/class-reference/Highcharts.Axis.html#setExtremes
• https://api.highcharts.com/class-reference/Highcharts.Axis.html#getExtremes

Answer 2

Знаете ли вы максимум вашего набора данных? Вы можете добавить что-то вроде этого [Date.UTC(2018,3,15),null], чтобы сместить значения, которые еще не были заполнены. Это не самое элегантное решение, но оно работает.

РЕДАКТИРОВАТЬ: или вы можете сделать это

xAxis:[{
    type:'datetime',
    max: Date.UTC(2018,3,4),
    tickInterval: 30 * 24 * 3600 * 1000
 }, {
    type: 'datetime',
    max: Date.UTC(2018,3,18),
    tickInterval: 30 * 24 * 3600 * 1000
}],

вот стекопоток для обоих примеров Максимальный интервал Highcharts для dateTime по оси x?