javascript - 类别较少时如何在高图中显示所有数据?
问题描述
我正在使用 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 个标签。但是,当我这样设置类别时,如果系列中的数据多于类别,则并非所有数据都显示在图表中。任何帮助表示赞赏!
解决方案
您可以根据您的数据计算min
和max
属性:
var 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参考:
推荐阅读
- android - 关闭活动时重新初始化片段
- sql-server - SQL Server 管理工作室 v18.8
- php - Laravel Spatie 权限 - 没有名为“学生”的角色
- java - 为什么一旦 GC 运行,所有符合 GC 条件的对象都不会被销毁?
- json - 如何在 Flutter 中从 API 获取时传递参数 JSON
- javascript - 纯 Javascript Tile 地图碰撞检测
- c - usleep() 和 inet_aton() 定义的奇怪行为
- microsoft-teams - Teams 消息扩展与操作命令、底层机器人和通过 Graph API 访问之间的关系
- codeigniter - Codeigniter 4.0.4 重定向到 404 - 找不到文件
- node.js - 如何在 ExpressJs 应用程序上配置 Content-Policy-Security 标头?