如何通过 ajax 刷新 highcharts（饼图）数据

Question

我正在尝试自动刷新 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: [] }] }); });

感谢你的帮助：）

Answer 1

我认为每 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);

API: https://api.highcharts.com/class-reference/Highcharts.Series#update