如何制作具有每月间隔的动态日期时间范围的高图表

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 年 9 月

还有一个结束日期 - 2019/05/01，即 2019 年 5 月

我需要制作一个带有 yAxis 的图表

min: 0.0
max: 6.0

和 xAxisdatetime类型

到目前为止，我有这个配置

{
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])
}]
};

然而，高图表看起来不对 - 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>