如何在这个简单的库存图中正确格式化x标签?

问题描述 投票:0回答:2

这是我的https://jsfiddle.net/rmv78z45/1/

我只是试图以YYYY-MM-DD格式在x轴上正确显示日期

我试过设置xAxis: datetime,但它只是打破了图表。在jsfiddle中尝试一下。

x轴悬停正确显示2019-01-01, 2019-01-02但x轴以1-Jan然后00:00:00:001, ..002, 003等开始。

javascript highcharts
2个回答
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(日期)的问题!

现在完美地运作!


0
投票

Date应该是一个UTC时间戳,因此你可以使用带有getTime()的Date构造函数(返回自Unix Epoch以来的毫秒数)作为每个数据数组中的第一个索引。

例如:

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>
© www.soinside.com 2019 - 2024. All rights reserved.