如何根据传递给它的数据重新绘制Google图表？

Posted 2021-04-09

我发现显示Google Charts的大部分示例都有简单的小数组......

我需要从我的服务器中拉出一个数组。

我可以得到一个饼图来绘制，但它不会更新。

这是我尝试获得灵活的重绘饼图：

在我的javascript顶部，但在document.ready之前：

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

我的drawChart功能：

function drawChart(arrFeedbackResult3) {
  console.log('Draw a fucking chart ... ') + console.log(arrFeedbackResult3);

  var chart_data = new google.visualization.DataTable(arrFeedbackResult3);
  var options = {
    title: 'Comments by Group',
    sliceVisibilityThreshold: 1/20, // Only > 5% will be shown.
    width: 400,
    height: 400
  };

  chart = new
  google.visualization.PieChart(document.getElementById('groupPieChartDiv'));
  chart.draw(chart_data, options);
  // chart = new google.visualization.PieChart(document.getElementById('groupPieChartDiv'));
  // chart.draw(data, options);
}

并且在单击按钮后，将新数据传递给drawChart的功能：

function setupFeedback3(arrFeedbackResult3){    //  Create Group summary Graphs

  console.log('Groups summary from DB: ') + console.log(arrFeedbackResult3);

  drawChart(arrFeedbackResult3);
}   //  END setupFeedback3

我在上面的代码中看到了“table has no columns”消息。

数组arrFeedbackResult3格式正确，并在我更改代码时呈现图表但最终无法刷新。

任何帮助赞赏。我想我只是错过了使用Google Charts的基本流程......以及应该如何/在何处使用回调。

---

在非常慷慨和详细的回复后，我的下一次尝试更新。

我的js与html分开存放。我无法通过回调传递数组来工作。我得到“不是构造函数”错误或“不是函数”。我认为因为添加括号值会破坏代码。

我也不理解有关document.ready的评论。我已经保留了document.ready以加载我的所有其他功能。

在文件之后。我已经：

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

然后，在我的db POST获取数据后，我调用：

function setupFeedback3(result){    //  Create Group summary Graphs
  arrFeedbackResult3 = result;    //Store in global variable for access by chart
  drawChart();
}   //  END setupFeedback3

arrFeedbackResult3是一个GLOBAL变量 - 只有这样才能将数据传递给绘制图表函数。

然后：

function drawChart() {
  console.log('Draw a chart ... ') + console.log(arrFeedbackResult3);

  // var chart_data = new google.visualization.DataTable(arrFeedbackResult3);
  var chart_data = google.visualization.arrayToDataTable(arrFeedbackResult3);

  var options = {
    title: 'Comments by Group',
    sliceVisibilityThreshold: 1/20,
    width: 400,
    height: 400
  };

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

这是有效的，图表会在您提供不同的数据时更新，但它似乎是一种劣质的事态。传递数据的一个特定示例，相对于一个愚蠢的简单示例或在函数内部使用AJAX，将会非常有用。

答案

首先，建议不要使用jsapi来加载库。

根据release notes ...

通过jsapi加载程序保留的Google Charts版本不再一致地更新。请从现在开始使用新的gstatic loader.js。

<script src="https://www.gstatic.com/charts/loader.js"></script>

这只会改变load声明......

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

---

接下来，可以将回调添加到load语句中......

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

或者你可以使用它返回的承诺......

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

另外，load语句将一直等到文档准备就绪， 所以它可以用来代替 - > $(document).ready

---

最后，在创建数据表时， 构造函数的参数应该是JSON，而不是简单的数组 见Format of the Constructor's JavaScript Literal data Parameter， 对于特定的JSON格式

如果要从简单数组创建数据表， 使用static method - > arrayToDataTable

---

建议设置类似于以下...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  // get data
  drawChart(arrayData);
});

function drawChart(arrayData) {
  var chart_data = google.visualization.arrayToDataTable(arrayData);

  var options = {
    title: 'Comments by Group',
    sliceVisibilityThreshold: 1/20,
    width: 400,
    height: 400
  };

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

function setupFeedback(arrayData) {
  // get data
  drawChart(arrayData);
}   

---

UPDATE

您可以使用load语句返回的promise作为回调和文档就绪 只需移动代码，如下所示......

然后你可以加载你的ajax调用来获取数据

google.charts.load('current', {
  packages:['corechart']
}).then(function () {

  // move code from document ready here

  // get data
  getData();

});

function getData() {
  $.ajax({
    type: 'POST',
    contentType: 'application/json',
    url: sourceURL,
    success: setupFeedback
  });
}

function setupFeedback(result) {
  // you could draw the chart here
  // just move the code from drawChart

  // or pass the data along to another function
  drawChart(result);
}

function drawChart(result) {
  var chart_data = google.visualization.arrayToDataTable(result);

  var options = {
    title: 'Comments by Group',
    sliceVisibilityThreshold: 1/20,
    width: 400,
    height: 400
  };

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