时间戳

首页 > 解决方案 > 如何通过ajax刷新highcharts（饼图）数据

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

问题描述

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

感谢你的帮助 ：）

标签： javascriptlaravel-5highcharts

解决方案

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

推荐阅读