Question

我想刷新图表而不刷新。我使用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);
    }

Answer 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();
});

Answer 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响应数据，并使用一些值设置数据集的默认数据。

我如何在没有刷新页面的情况下刷新图表？

2 个答案: