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

我有一段

JavaScript

代码来加载谷歌图表：

<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>

load（'current'，{'packages'：['line']}）；
设定间隔（绘图图，1000）；
函数绘图图（）{
var jsonData=$.ajax({
url:“getData.php”，
数据类型：“json”，
异步：false
}).responseText；
//使用从服务器加载的JSON数据创建我们的数据表。
var data=新的google.visualization.DataTable（jsonData）；
变量选项={
图表：{
片名：“首映前两周的票房收入”，
字幕：“百万美元”
},
宽度：900，
身高：500
};
var chart=new google.charts.Line（document.getElementById（'chart'）；
图表绘制（数据、选项）；
}

这段代码从Restful端点加载数据以绘制图表。问题是，由于这是一个监控远程变量的图表，它必须不断刷新自身以获取和显示最新的数据。它工作正常，数据被正确地获取和显示，但是图表会无休止地闪烁，那么我该怎么做才能避免图表在每次数据加载时都会闪烁

提前感谢。

为了防止“闪烁”，请保存对图表的引用

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

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

另外，在绘制图表之前，一定要等待

的“回调”

强烈建议不要在

$.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']
});

注：还建议不要使用材料图表

否则，这将是引入

动画的理想场景