Как правильно отформатировать x-метки на этой простой биржевой диаграмме?

Question

Вот мой https://jsfiddle.net/rmv78z45/1/

Я просто пытаюсь правильно отобразить даты на оси X в формате ГГГГ-ММ-ДД

Я попытался установить xAxis: datetime, но это просто нарушает график. Попробуйте это в jsfiddle.

Наведение по оси X правильно показывает 2019-01-01, 2019-01-02, но ось X начинается с 1-Jan, а затем 00:00:00:001, ..002, 003 и т. Д.

Answer 1

мне удалось решить это по-другому, сопоставляя Data.parse в первом столбце

dat1 = [["2019-01-01", 0],["2019-01-02",2],["2019-01-03", 5],["2019-01-04",10]];

dat1 = dat1.map(([date,L]) => [Date.parse(date), L]);

таким образом, он хорошо распознает дату.

У меня была другая проблема с таким форматированным массивом JSON:

dat2 = [{"date":"2018-05-25","L":"3"},{"date":"2018-06-01","L":"2"},{"date":"2018-06-08","L":"2"},{"date":"2018-06-15","L":"3"}];
dat2 = dat2.map(({date,L}) => [date, L]);
dat2 = dat2.map(([date,L]) => [Date.parse(date), parseInt(L) ]);

Я решил, что используя parseInt () и Date.parse (date), а также!

теперь отлично работает!

Answer 2

Дата должна быть в формате UTC, поэтому вы можете использовать конструктор Date с getTime () (который возвращает число миллисекунд с начала эпохи Unix) в качестве первого индекса в каждом массиве данных, который вы будете использовать. хорошо идти.

Например:

Highcharts.stockChart('container', {
  series: [{
    name: 'AAPL',
    data: [
      [new Date("2019-01-01").getTime(), 0],
      [new Date("2019-01-02").getTime(), 2],
      [new Date("2019-01-03").getTime(), 5],
      [new Date("2019-01-04").getTime(), 10]
    ]
  }]
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>

<div id="container" style="height: 400px; max-width: 800px"></div>