谷歌图表在连续数据加载时闪烁

Question

我有这段JavaScript代码来加载一个Google图表:

<script type="text/javascript">
    google.charts.load('current', {'packages':['line']});
    setInterval(drawChart, 1000);
    function drawChart() {
        var jsonData = $.ajax({
            url: "getData.php",
            dataType:"json",
            async: false
        }).responseText;
        // Create our data table out of JSON data loaded from server.
        var data = new google.visualization.DataTable(jsonData);
        var options = {
            chart: {
                title: 'Box Office Earnings in First Two Weeks of Opening',
                subtitle: 'in millions of dollars (USD)'
            },
            width: 900,
            height: 500
        };
        var chart = new google.charts.Line(document.getElementById('chart'));
        chart.draw(data, options);
    }
</script>

这段代码从Restful端点加载数据来绘制图表。问题是，由于这是一个监控远程变量的图表，它必须不断刷新自己以获取并显示最新的数据。它工作得很好，数据被正确地获取和显示，但图表无休止地闪烁，所以我能做些什么来避免图表在每次数据加载时闪烁?

Answer 1

为防止"闪烁"，保存对图表的引用，

，用新的数据绘制相同的图表

而不是每次都创建一个新图表

同时，在绘制图表之前一定要等'callback'完成

，强烈建议不要在$.ajax呼叫中使用async: false

建议设置如下…

google.charts.load('current', {
  callback: function () {
    var chart = null;
    var options = {
      chart: {
        title: 'Box Office Earnings in First Two Weeks of Opening',
        subtitle: 'in millions of dollars (USD)'
      },
      width: 900,
      height: 500
    };
    drawChart();
    setInterval(drawChart, 1000);
    function drawChart() {
      $.ajax({
        url: "getData.php",
        dataType:"json",
      }).done(function (jsonData) {
        var data = new google.visualization.DataTable(jsonData);
        if (chart==null)
           chart = new google.charts.Line(document.getElementById('chart'));
        chart.draw(data, options);
      }).fail(function (jq, text) {
        console.log(text);
      });
    }
  },
  packages: ['line']
});

注意:还建议不使用Material图表，有几个选项不起作用

否则，这将是引入animation