javascript - 自动刷新谷歌图表

Question

我有一个Pie Chart并且想要auto refresh每 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>

Answer 1

您可以使用 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>

Answer 2

我修好了，如果有人想动态更新任何谷歌图表，你只需要像你看到的那样添加 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>