如何通过ajax刷新highcharts (饼图)数据
如何通过ajax刷新highcharts (饼图)数据
提问于 2020-06-25 15:59:30
我正尝试在highcharts (饼图)中自动刷新我的ajax查询。基本上，我希望我的数据每5秒刷新一次。但我的屏幕上什么也没出现。尝试在highcharts中使用事件，但我不确定这是否是正确的方法。
这是我的JS的一小段：
const leadstatus_peryear_title = $('#valLeadPerYear').val();
var leadbyyear_chart;
function requestLeadStatusByYear(){
$.ajax({
url: '/sample/dashboard/query',
method: 'get',
dataType: 'json',
success:function(result){
var resultsArr = [];
$.each(result, function(index, element) {
resultsArr.push({
status: index,
status_count: parseFloat(element)
});
});
var data = [];
$.each(resultsArr, function(index, element) {
data.push({
name: element.status,
y: element.status_count
});
});
leadbyyear_chart.series[0].data = data;
// call it again after one second
setTimeout(requestLeadStatusByYear, 1000);
},
cache: false
});
}
document.addEventListener('DOMContentLoaded', function() {
leadbyyear_chart = Highcharts.chart('leadsPerYear', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
events: {
load: requestLeadStatusByYear
}
},
title: {
text: leadstatus_peryear_title
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
name: 'Number of Leads in Percent',
colorByPoint: true,
animation: false,
data: []
}]
});
});
感谢您的帮助:)
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-06-25 22:27:08
我认为使用并每隔5秒触发一次series.update特性来重新绘制图表和设置新数据是您正在寻找的解决方案。
演示：https://jsfiddle.net/BlackLabel/j8gv42df/
// ajax call simulation;
setInterval(function() {
function randomData(n) {
var output = [];
for (let i = 0; i < 10; i++) {
output.push({
name: 'test' + n + i,
y: Math.random() * 100
})
}
return output;
}
i++;
chart.series[0].update({
data: randomData(i)
})
}, 3000);接口名：https://api.highcharts.com/class-reference/Highcharts.Series#update
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62570595
复制相关文章
相似问题
腾讯云开发者
