javascript - 在没有默认系列的情况下在 Highcharts 上显示实时数据
问题描述
我从 Highchart 网站找到了这段代码:https ://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/dynamic-update/
我想在具有空默认系列的图表上显示数据并放置dateTime
为xAxis
. 我不想使用 jQuery,也不想在图表中添加加载事件点。我只想在页面完全加载时添加点。我用这个
const chart = new Highcharts.chart('container', {
...
...
...
}
document.addEventListener('DOMContentLoaded', function() {
var i = 0;
console.log(chart)
setInterval(function() {
console.log(values[i])
chart.series[0].addPoint(values[i], true, true);
i++;
}, 1000);
})
我使用了类似上面链接的图表结构。values[i]
一点是[dateTime, Number]
我从我的 API 中得到它。我找到了一些使用类别的解决方案,xAxis
但我需要使用dateTime
并显示dateTime
没有类别。
解决方案
您不能将带有移位的点添加到没有数据的系列中。添加第一个点而不使用移位或不使用移位:http: //jsfiddle.net/BlackLabel/0h9jz3t1/
const chart = new Highcharts.chart('container', {
series: [{}]
});
const values = [[100, 20], [200, 20], [300, 20], [400, 20], [500, 20]];
document.addEventListener('DOMContentLoaded', function() {
var i = 0;
chart.series[0].addPoint(values[i], true, false);
i++;
setInterval(function() {
chart.series[0].addPoint(values[i], true, true);
i++;
}, 1000);
});
现场演示:http: //jsfiddle.net/BlackLabel/oqp30tna/
API:https ://api.highcharts.com/class-reference/Highcharts.Series#addPoint
推荐阅读
- laravel - 错误 405:方法不允许,EditUser 路由无法获取信息
- android - 如何在android中使用Volley将整数和字符串数组JSON数据发送到服务器
- javascript - 使用 o(n) 复杂度找到总和等于给定值的对
- java - 从 Android 设备获取 GMT 时区
- python - 我如何更新熊猫数据框,只保留左上角的原始数据框?
- c++ - 标头中的 constexpr 数组
- mysql - 将文件更新到mysql时出错
- algorithm - 查找删除断开图的所有节点对
- dart - 如何在 dart 中使用 Analyzer 编辑节点
- oracle - 如何查看所有连接器标识符?