如何根据传递给谷歌的数据重新绘制谷歌图表?

我发现的大多数显示谷歌图表的示例都有简单的小数组。。。

我需要从服务器中提取阵列。

我可以画一个饼图,但它不会更新。

以下是我尝试获得一个灵活、重新绘制的饼图:

在我的javascript顶部,但在文档之前。准备就绪:

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(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的格式正确,在我更改代码时确实会呈现图表,但最终无法刷新。

感谢您的帮助。我想我只是错过了使用谷歌图表的基本流程。。。以及如何/在何处使用回调。

在得到非常慷慨和详细的答复后,我将更新我的下一次尝试。

我的js与html位于一个单独的文件中。我无法通过回调传递数组。我得到“非构造函数”错误或“非函数”我认为,因为添加附加值会破坏代码。

我也不理解关于文件的评论。答案已准备就绪。。。我保存了文件。准备好加载所有其他功能。

文档之后。我准备好了:

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是一个全局变量-我可以将数据获取到draw chart函数的唯一方法。

然后:

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相比,会非常有用。