Question

每次通过ajax调用提取数据时，如何动态向Google饼图添加行？

html

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

Google饼图

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查询中获取的新值，如下所示：

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

如何使用ajax和jquery向Google饼图动态添加行

1 个答案: