英文:
Adding live data to Highchart Timeline
问题
我正在尝试使用Highchart创建一个时间线图，以显示随时间推移发生的事件。我已经成功创建了一个静态图表（显示过去15分钟的事件），但无法添加实时事件（每分钟一次）。我正在使用独立的方法（纯JavaScript）。
在页面加载时，createTimeline() 方法将被调用。all_events 是通过与后端服务器的 AJAX 调用获得的。
我已经添加了 chart.events.load 以在页面加载后获取实时事件并在每隔1分钟触发它。
以下是代码部分：
function createTimeline() {
// ... （此处省略了部分代码）
timelineChart = Highcharts.chart('timelineChart', {
chart: {
// ... （此处省略了部分代码）
events : {
load : function () {
// 在每分钟调用此方法
var series = this.series[0];
setInterval(function () {
console.log(series)
events_1m = []
var start_time = moment().subtract(1, 'minutes').format('MM/D/YYYY HH:mm A');
payload = JSON.stringify({
time_gte: start_time
})
$.ajax({
type: "POST",
url: "/filter",
data: payload,
contentType: "application/json",
success: function(d) {
events_1m = JSON.parse(JSON.stringify(d));
for(var event of events_1m) {
obj = {
// ... （此处省略了部分代码）
}
series.addPoint([obj], true, true);
}
}
});
}, 60000);
}
}
},
// ... （此处省略了部分代码）
});
}
在加载时获取的事件能够正确显示在图表上，但是新的事件没有追加。setInterval 每隔1分钟成功调用该方法，我通过添加 console.log 进行了验证。
英文:
I am trying to create a timeline graph to show events over time using Highchart. I've been able to create a static graph (events in last 15 mins), but not able to add live events to it (every minute). I'm using the standalone method (vanilla js).
createTimeline() method will get called at page load. all_events is obtained via an ajax call to the backend server.
I've added chart.events.load to fetch live events after page load and trigger it at every 1 minute.
function createTimeline() {
data = []
// Creating data I need to add at load time
for(var event of all_events['events_15m']) {
obj = {
'x': Date.parse(event.event_time['$date']),
'name': event.source + ' ' + event.event_name,
'label': event.event_name,
'description': 'User:' + event.user + ' \nApplication: ' + event.application + ' ' + JSON.stringify(event.details)
}
data.push(obj)
}
Highcharts.setOptions({
global: {
useUTC: false
}
});
timelineChart = Highcharts.chart('timelineChart', {
chart: {
zoomType: 'name',
type: 'timeline',
events : {
load : function () {
// call this at every minute
var series = this.series[0];
setInterval(function () {
console.log(series)
events_1m = []
var start_time = moment().subtract(1, 'minutes').format('MM/D/YYYY HH:mm A');
payload = JSON.stringify({
time_gte: start_time
})
$.ajax({
type: "POST",
url: "/filter",
data: payload,
contentType: "application/json",
success: function(d) {
events_1m = JSON.parse(JSON.stringify(d));
for(var event of events_1m) {
obj = {
dataLabels: {
allowOverlap: false,
format: '<span style="color:{point.color}">● </span><span style="font-weight: bold;" > ' +
'{point.x:%H:%M:%S}</span><br/>{point.label}'
},
marker: {
symbol: 'circle'
},
data: {
'x': Date.parse(event.event_time['$date']),
'name': event.source + ' ' + event.event_name,
'label': event.event_name,
'description': 'User:' + event.user + ' \nApplication: ' + event.application + ' ' + JSON.stringify(event.details)
}
}
}
series.addPoint([obj], true, true);
}
});
}, 60000);
}
}
},
xAxis: {
type: 'datetime',
visible: true,
},
yAxis: {
gridLineWidth: 1,
title: null,
labels: {
enabled: false
}
},
legend: {
enabled: false
},
title: {
text: 'Timeline of Events (last 15 mins)'
},
tooltip: {
style: {
width: 300
}
},
series: [{
dataLabels: {
allowOverlap: false,
format: '<span style="color:{point.color}">● </span><span style="font-weight: bold;" > ' +
'{point.x:%H:%M:%S}</span><br/>{point.label}'
},
marker: {
symbol: 'circle'
},
data: data
}],
plotOptions: {
series: {
turboThreshold: 10000
}
}
});
}
Events fetched at the load time are displayed correctly on the graph, but newer events are not appended. setInterval calls the method successfully at every 1 min, I validated this by adding console.log
答案1
得分: 1
需要将该点添加为对象，而不是一个只包含单个对象的数组。
series.addPoint(obj);
在线演示： https://jsfiddle.net/BlackLabel/wn306vhc/
API 参考文档： https://api.highcharts.com/class-reference/Highcharts.Series#addPoint
英文:
You need to add the point as an object, not an array with a single object.
series.addPoint(obj);
Live demo: https://jsfiddle.net/BlackLabel/wn306vhc/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Series#addPoint
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论