Javascript 自动刷新谷歌图表

我有一个

饼图

，希望每5秒

自动刷新一次。这是我的代码：

<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var options = {
            width: 900,
            height: 500,
            title: 'Partition des tickets',
            legend: 'left',
            is3D: true
        };
        $.ajax({
            type: "POST",
            url: "Home.aspx/GetPieChartData",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                var data = google.visualization.arrayToDataTable(r.d);
                var chart = new google.visualization.PieChart($("#chart_Pie")[0]);
                chart.draw(data, options);
            },
            failure: function (r) {
                alert(r.d);
            },
            error: function (r) {
                alert(r.d);
            }
        });
    }
</script>


load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
变量选项={
宽度：900，
身高：500，
标题：“门票分割”，
图例：“左”，
is3D：对
};
$.ajax({
类型：“POST”，
url:“Home.aspx/GetPieChartData”，
数据：“{}”，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：功能（r）{
var data=google.visualization.arrayToDataTable（r.d）；
var chart=new google.visualization.PieChart（$（“#chart_Pie”）[0]）；
图表绘制（数据、选项）；
},
故障：功能（r）{
警报（r.d）；
},
错误：函数（r）{
警报（r.d）；
}
});
}
您可以使用setTimeout每5秒运行一次脚本。我还添加了一个isDrawing标志，这样在函数绘制时就不会再次触发该函数

<script type="text/javascript">
  var isDrawing = false;
  google.load("visualization", "1", { packages: ["corechart"] });
  google.setOnLoadCallback(() => {
    // draw the first time
    drawChart();
    // start automatic refresh
    setTimeout(() => {
      if (!isDrawing) {
        drawChart();
      }
    }, 5000);
  });

  function drawChart() {
    isDrawing = true;
    var options = {
      width: 900,
      height: 500,
      title: "Partition des tickets",
      legend: "left",
      is3D: true
    };
    $.ajax({
      type: "POST",
      url: "Home.aspx/GetPieChartData",
      data: "{}",
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      success: function(r) {
        var data = google.visualization.arrayToDataTable(r.d);
        var chart = new google.visualization.PieChart($("#chart_Pie")[0]);
        chart.draw(data, options);
        isDrawing = false;
      },
      failure: function(r) {
        alert(r.d);
        isDrawing = false;
      },
      error: function(r) {
        alert(r.d);
        isDrawing = false;
      }
    });
  }
</script>



var isDrawing=错误；
load（“可视化”、“1”、{packages:[“corechart”]}）；
google.setOnLoadCallback（（）=>{
//第一次画
图纸（）；
//启动自动刷新
设置超时（（）=>{
如果（！isDrawing）{
图纸（）；
}
}, 5000);
});
函数绘图图（）{
isDrawing=true；
变量选项={
宽度：900，
身高：500，
标题：“分区des票”，
传奇：“左”，
is3D：对
};
$.ajax({
类型：“POST”，
url:“Home.aspx/GetPieChartData”，
数据：“{}”，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：功能（r）{
var data=google.visualization.arrayToDataTable（r.d）；
var chart=new google.visualization.PieChart（$（“#chart_Pie”）[0]）；
图表绘制（数据、选项）；
isDrawing=false；
},
故障：功能（r）{
警报（r.d）；
isDrawing=false；
},
错误：函数（r）{
警报（r.d）；
isDrawing=false；
}
});
}
我修复了它，如果有人想动态更新谷歌图表，只需添加update（）函数，如您所见

 <script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var options = {
            width: 900,
            height: 500,
            title: 'Partition des tickets',
            legend: 'left',
            is3D: true,


        };
        $.ajax({
            type: "POST",
            url: "Home.aspx/GetPieChartData",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                var data = google.visualization.arrayToDataTable(r.d);
                var chart = new google.visualization.PieChart($("#chart_Pie")[0]);
                chart.draw(data, options);
                updateChart();
            },
            failure: function (r) {
                alert(r.d);
            },
            error: function (r) {
                alert(r.d);
            }
        });
         function updateChart() {
              $.ajax({
            type: "POST",
            url: "Home.aspx/GetPieChartData",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                var data = google.visualization.arrayToDataTable(r.d);
                var chart = new google.visualization.PieChart($("#chart_Pie")[0]);
                chart.draw(data, options);
            },
            failure: function (r) {
                alert(r.d);
            },
            error: function (r) {
                alert(r.d);
            }
        });

                setTimeout(function () { updateChart() }, 1000);
            };
    }
</script>  


load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
变量选项={
宽度：900，
身高：500，
标题：“门票分割”，
图例：“左”，
is3D：是的，
};
$.ajax({
类型：“POST”，
url:“Home.aspx/GetPieChartData”，
数据：“{}”，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：功能（r）{
var data=google.visualization.arrayToDataTable（r.d）；
var chart=new google.visualization.PieChart（$（“#chart_Pie”）[0]）；
图表绘制（数据、选项）；
updateChart（）；
},
故障：功能（r）{
警报（r.d）；
},
错误：函数（r）{
警报（r.d）；
}
});
函数updateChart（）{
$.ajax({
类型：“POST”，
url:“Home.aspx/GetPieChartData”，
数据：“{}”，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：功能（r）{
var data=google.visualization.arrayToDataTable（r.d）；
var chart=new google.visualization.PieChart（$（“#chart_Pie”）[0]）；
图表绘制（数据、选项）；
},
故障：功能（r）{
警报（r.d）；
},
错误：函数（r）{
警报（r.d）；
}
});
setTimeout（函数（）{updateChart（）}，1000）；
};
}
图表将消失