Question

我发现显示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

我得到一张＆＃34;表没有列＆＃34;使用上面的代码在我的页面上留言。

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

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

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

我的js与html位于一个单独的文件中。我无法通过回调传递数组来工作。我得到了＃34;而不是构造函数＆＃34;错误或＆＃34;不是功能。＆＃34;我认为因为添加括号值会破坏代码。

我也不理解有关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，将会非常有用。

Answer 1

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

根据release notes ...

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

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

这将仅更改load声明...

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

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

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

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

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

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

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

如果要从简单数组创建数据表，请执行使用static method - ＆gt; 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);
}

更新

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

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

1 个答案: