Как сделать высокие графики с динамическим диапазоном даты и времени с месячным интервалом

Question

У меня есть массив значений

[2.6, 3.2, 4.2, 3.3, 2.7, 4.5, 5.9, 2.7, 1.8, 1.7, 1.3, 1.8, 1, 1.4, 1.3, 1.4, 1.1, 1.1, 1, 1.4, 1, 1.4, 1.3, 1.5, 1.1, 1.2, 1.3, 1.3, 0.8, 0.9, 1, 1.1, 1, 1, 0.8]

А также дата начала - 2016/08/01, то есть сентябрь 2016

А также дата окончания - 2019/05/ 01, то есть май 2019

Мне нужно сделать диаграмму с yAxis с

min: 0.0
max: 6.0

и xAxis, которая datetime type

Пока яиметь эту конфигурацию

{
  yAxis: [
    {
      min: 0.0,
      max: 6.0,
      title: {
        text: 'Fill Days'
      }
    }
  ],
  xAxis: {
    type: 'datetime',
    min: Date.UTC(2016, 8, 1),
    max: Date.UTC(2019, 5, 1)
  },
  series: [{
    name: 'Some Name',
    type: 'spline',
    data: data.map((item, i) => [Date.UTC(Math.floor(2016 + (i / 12)), (8 * i) / 12, 1), item])
  }]
};

Однако Highchart выглядит неправильно - https://jsfiddle.net/1utjnyfL/1/

Я хочу, чтобы он увеличивался ежемесячно с Sep 16 до May 19, где каждый элемент в массиве данныхберется один за другим.

Sep 16 - 2.6
Oct 16 - 3.2
Nov 16 - 4.2
...
May 19 - 0.8

Answer 1

Вы не учитываете, что начинаете с сентября года.Как только вы измените отображение, оно будет работать нормально.

var series = data.map((item, i) => [Date.UTC(Math.floor(2016 + ((7 + i) / 12)), (((7 + i) % 12) + 1), 1), item])

Пожалуйста, проверьте приведенный ниже рабочий пример:

data = [2.6, 3.2, 4.2, 3.3, 2.7, 4.5, 5.9, 2.7, 1.8, 1.7, 1.3, 1.8, 1, 1.4, 1.3, 1.4, 1.1, 1.1, 1, 1.4, 1, 1.4, 1.3, 1.5, 1.1, 1.2, 1.3, 1.3, 0.8, 0.9, 1, 1.1, 1, 1, 0.8]

var series = data.map((item, i) => [Date.UTC(Math.floor(2016 + ((7 + i) / 12)), (((7 + i) % 12) + 1), 1), item])


Highcharts.chart('container', {
  yAxis: [{
    min: 0.0,
    max: 6.0,
    title: {
      text: 'Some Text'
    }
  }],
  xAxis: {
    type: 'datetime',
    min: Date.UTC(2016, 8, 1),
    max: Date.UTC(2019, 5, 1)
  },
  series: [{
    name: 'Some Name',
    type: 'spline',
    data: series
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px; width: 500px"></div>