Ajax Google Gauge图表实时更新

我一直在尝试实时更新我的谷歌仪表图表

我的代码如下

<script type='text/javascript'>
      google.load('visualization', '1', {packages:['gauge']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {

      var json = $.ajax({
                    url: 'graph.php', // make this url point to the data file
                    dataType: 'json',
                    async: false
                }).responseText;
                //alert(json);
        var data = google.visualization.arrayToDataTable(json);
        var options = {
          width: 400, height: 120,
          redFrom: 0, redTo: 3,
          greenFrom:<?php echo $inactivecount['inactive_count']-3;?>, greenTo: <?php echo $inactivecount['inactive_count'];?>,
          minorTicks: 0,
          min:0,
          max:<?php echo $inactivecount['inactive_count'];?>,
          'majorTicks': ["",""],
          'animation.duration':100
        };

        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
        //setInterval(drawChart(12,10),1000);
        chart.draw(data, options);

        setInterval(drawChart, 1000);
      }
    </script>

---

如果在数据中对json进行硬编码，那么它可以正常工作，但是当我以相同的json格式从ajax返回json时，它不会首先绘制量规，调用setInterval（drawChart，1000）不是您想要做的-这将在每次调用中产生一个新的间隔（在现有间隔的基础上），因此间隔会呈指数级增长，每秒增加一倍（大约-考虑到AJAX调用和代码的执行时间，这将稍微长一点）。这将很快锁定你的浏览器和/或用传入的请求淹没你的服务器。请尝试以下方法：

function drawChart() {
    var data;
    var options = {
        width: 400,
        height: 120,
        redFrom: 0,
        redTo: 3,
        greenFrom: <?php echo $inactivecount['inactive_count']-3;?>,
        greenTo: <?php echo $inactivecount['inactive_count'];?>,
        minorTicks: 0,
        min: 0,
        max: <?php echo $inactivecount['inactive_count'];?>,
        majorTicks: ["",""],
        animation: {
            duration: 100
        }
    };

    var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

    function refreshData () {
        var json = $.ajax({
            url: 'graph.php', // make this url point to the data file
            dataType: 'json',
            async: false
        }).responseText;

        data = google.visualization.arrayToDataTable(json);

        chart.draw(data, options);
    }

    refreshData();
    setInterval(refreshData, 1000);
}

函数绘图图（）{
var数据；
变量选项={
宽度：400，
身高：120，
发自:0,，
雷德托：3，
greenFrom:，
格林托：，
米诺蒂克斯：0，
分:0,，
马克斯：，
主要字母：[''，''，
动画：{
持续时间：100
}
};
var chart=new google.visualization.Gauge（document.getElementById（'chart_div'））；
函数刷新数据（）{
var json=$.ajax({
url:'graph.php'，//使此url指向数据文件
数据类型：“json”，
异步：false
}).responseText；
data=google.visualization.arrayToDataTable（json）；
图表绘制（数据、选项）；
}
刷新数据（）；
设置间隔（刷新数据，1000）；
}

如果这不起作用，那么在浏览器中转到

graph.php

，发布它的输出，这样我就可以测试它了

function drawChart() {
    var data;
    var options = {
        width: 400,
        height: 120,
        redFrom: 0,
        redTo: 3,
        greenFrom: <?php echo $inactivecount['inactive_count']-3;?>,
        greenTo: <?php echo $inactivecount['inactive_count'];?>,
        minorTicks: 0,
        min: 0,
        max: <?php echo $inactivecount['inactive_count'];?>,
        majorTicks: ["",""],
        animation: {
            duration: 100
        }
    };

    var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

    function refreshData () {
        var json = $.ajax({
            url: 'graph.php', // make this url point to the data file
            dataType: 'json',
            async: false
        }).responseText;

        data = google.visualization.arrayToDataTable(json);

        chart.draw(data, options);
    }

    refreshData();
    setInterval(refreshData, 1000);
}