如何使用ajax和jquery向Google餅圖動態添加行

Question

每次通過Ajax調用提取數據時，如何動態向Google餅圖添加行？

html

<div id="piechart" style="width: 900px; height: 500px;"></div>

谷歌餅圖

google.charts.load("current", {packages: ["corechart"]});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['Work', 11],
        ['Eat', 2],
        ['Commute', 2],
        ['Watch TV', 2],
        ['Sleep', 7]
    ]);

    var options = {
        'width': 900,
        'height': 500
        // pieHole: 0.4,
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    chart.draw(data, options);
}

現在，而不是我希望在頁面加載后立即動態添加行，應該添加從ajax查詢中獲取的新值，如下所示：

阿賈克斯電話

function getPieChartData() {
    $.ajax({
        url: pieChartData,
        headers: {
            token: token,
            params: JSON.stringify({
                "ads":[2,3],"start_date":"2018-01-01"
            })
        },
        type: "GET"
    }).then((response)=> {
        r = JSON.parse(response);
        let data = r.data
        if(data.length >0){
        }
    })
}

Answer 1

默認情況下， google.charts.load將等待頁面加載，
我們可以用它代替$(document).ready或類似的函數。

Google圖表加載后，繼續創建數據表，圖表，選項等，
然后獲取數據。

假設數據是一個數組數組，類似於您提供的示例，
您可以簡單地使用數據表方法addRows將數據添加到數據表中。
例如

data.addRows([
  ['Work', 11],
  ['Eat', 2],
  ['Commute', 2],
  ['Watch TV', 2],
  ['Sleep', 7]
]);

要么...

data.addRows(r.data);

如果是單個數組或一行，請使用addRow

data.addRow(['Work', 11]);

完整的代碼段可能看起來像這樣...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Category');
  data.addColumn('number', 'Value');

  var options = {
    width: 900,
    height: 500
  };

  var chart = new google.visualization.PieChart(document.getElementById('piechart'));

  getPieChartData();

  function getPieChartData() {
    var pieChartData = 'some url';
    var token = 'some token';

    $.ajax({
      url: pieChartData,
      headers: {
        token: token,
        params: JSON.stringify({
          "ads":[2,3],"start_date":"2018-01-01"
        })
      },
      type: "GET"
    }).then((response)=> {
      r = JSON.parse(response);
      if (r.data.length > 0){
        data.addRows(r.data);
        chart.draw(data, options);
      }
    });
  }
});