当类别较少时,如何在高图中显示所有数据?

我正在使用 highcharts 为我的数据生成图表。我的疑问如下:如果我有如下数据,并且我知道这个时期是今天。


"data": [{

 "time": '12-10-2020 00:50:00',

 "value": 526.42

}, {

 "time": '12-10-2020 01:45:00',

 "value": 80

}, {

"time": '12-10-2020 02:47:00',

"value": 17

}, {

"time": '12-10-2020 03:52:00',

"value": 21

}, {

 "time": '12-10-2020 08:50:00',

"value": 5

 }, {

"time": '12-10-2020 09:48:00',

 "value": 5

}]

我大约每小时都有数据,但间隔不规则,所以有时它也会跳过一个小时,或者间隔可能小于一个小时,所以我的数据比这里多得多。所以我希望我的类别是这样的,['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:07', '00:08', '09:00'...]x 轴上总共有 24 个标签。但是,当我像这样设置类别时,如果系列中的数据多于类别,则并非所有数据都会显示在图表中。任何帮助表示赞赏!


波斯汪
浏览 92回答 1
1回答

HUH函数

您可以根据您的数据计算min和属性:maxvar oneHour = 1000 * 60 * 60;Highcharts.chart('container', {    time: {        useUTC: false    },    xAxis: {        type: 'datetime',        startOnTick: false,        endOnTick: false,        tickInterval: oneHour,        min: new Date(data.data[0].time.split(' ')[0]).getTime(),        max: (new Date(data.data[0].time.split(' ')[0]).getTime()) + oneHour * 24    },    series: [{        data: data.data.map(el => [            new Date(el.time).getTime(),            el.value        ])    }]});现场演示: http: //jsfiddle.net/BlackLabel/vzs1odqr/API参考:https://api.highcharts.com/highcharts/xAxis.minhttps://api.highcharts.com/highcharts/xAxis.max
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript