如何在不刷新页面的情况下刷新图表？答案

【问题标题】：How i can refresh chart without refresh page?如何在不刷新页面的情况下刷新图表？
【发布时间】：2019-11-25 20:08:18
【问题描述】：

我想刷新图表而不刷新。我使用 setTimeout 函数，但是当我应用于图表时，数据集仅在重新加载页面时刷新..

这个功能图...

$(function () {
        var areaChartData = {
            labels  : ['Goods', 'Qty'],
            datasets: [
            {
                label               : '>30 Days',
                backgroundColor     : 'red',
                borderColor         : 'red',
                pointRadius          : false,
                pointColor          : 'red',
                pointStrokeColor    : 'red',
                pointHighlightFill  : 'red',
                pointHighlightStroke: 'red',
                data                : [setTimeout(reload(), 5000), 21] 
            },
            {
                label               : '15-30 Days',
                backgroundColor     : 'orange',
                borderColor         : 'orange',
                pointRadius         : false,
                pointColor          : 'orange',
                pointStrokeColor    : 'orange',
                pointHighlightFill  : 'orange',
                pointHighlightStroke: 'orange',
                data                : [setTimeout(reload(), 5000), 22]
            }
            ]
        }
})

这个 jquery 函数...

function reload() {
        var temp;

        $.ajax({
            type  : 'ajax',
            url   : '<?= base_url()?>Dashboard/test',
            async : false,
            dataType : 'json',
            success : function(data) {
                temp = data;
            }
        })

        return temp;
        setTimeout(reload, 5000);
    }

【问题讨论】：

标签： jquery ajax chart.js

【解决方案1】：

您的退货声明在您的setTimeout 电话之前。我还建议不要同步使用 ajax，因为这会阻塞你的 UI 并可能导致它每 5 秒挂起一次。

如果可能的话，你应该将你的函数调用分隔成这样的格式：

$(function() {
  function bindChart(data) {
    var config = buildChartConfiguration(data);

    // bind configuration & data to chart here
    // $('#chart').plot(config)  or whatever your library's syntax is
  }

  function buildChartConfiguration(data) {
     return {
            labels  : ['Goods', 'Qty'],
            datasets: [
            {
                label               : '>30 Days',
                backgroundColor     : 'red',
                borderColor         : 'red',
                pointRadius          : false,
                pointColor          : 'red',
                pointStrokeColor    : 'red',
                pointHighlightFill  : 'red',
                pointHighlightStroke: 'red',
                data                : [data, 21] 
            },
            {
                label               : '15-30 Days',
                backgroundColor     : 'orange',
                borderColor         : 'orange',
                pointRadius         : false,
                pointColor          : 'orange',
                pointStrokeColor    : 'orange',
                pointHighlightFill  : 'orange',
                pointHighlightStroke: 'orange',
                data                : [data, 22]
            }
            ]
        }
  }

  function loadData() {
     $.ajax({
        type  : 'ajax',
        url   : '<?= base_url()?>Dashboard/test',
        dataType : 'json'
     })
     .then(bindChart)
     .then(function() {
        // on completion request new data in 5s
        setTimeout(loadData, 5000);
     });
  }

  // load data from server
  loadData();
});

【讨论】：

【解决方案2】：

试试这个：-

 $.ajax({
        type  : 'ajax',
        url   : '<?= base_url()?>Dashboard/test',
        async : false,
        dataType : 'json',
        success : function(data) {
            areaChartData.datasets[0].data = data;
            areaChartData.datasets[1].data = data;

        }
    })

然后您必须将 settimeout 设置为功能，该功能为您提供 ajax 响应数据并设置具有某些值的数据集的默认数据。

【讨论】：