Google Chart мерцает на последовательном загрузки данных

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> 

Этот код загружает данные из успокоительных конечной точки, чтобы нарисовать диаграмму. Дело в том, что поскольку это диаграмма для мониторинга удаленных переменных, она должна постоянно обновляться, чтобы извлекать и отображать самые последние данные. Он работает хорошо, и данные извлекаются и отображаются правильно, но диаграмма мерцает бесконечно, так что я могу сделать, чтобы диаграмма не отображалась при каждой загрузке данных?

Заранее спасибо.

Answer 1

, чтобы предотвратить «мерцание», сохраните ссылку на графике,

и нарисуйте такую ​​же таблицу с новыми данными

вместо создания новой диаграммы каждый раз, когда

также, убедитесь, ждать на 'callback', прежде чем рисовать графики

и очень рекомендую не с помощью async: false на $.ajax вызова

рекомендуют установку следующим образом ...

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

Примечание: также рекомендуем не с использованием материала диаграммы, several options don't work

в противном случае это был бы идеальный сценарий для введения animation