如何使用动态数据创建 Google 饼图？

Question

我正在努力获得下面的 google 饼图以反映在同一页面上的 html table 中找到的动态数据。

<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">     </script>
<script type="text/javascript">
   google.charts.load('current', {'packages':['corechart']});
   google.charts.setOnLoadCallback(drawChart);
  function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Answer', 'Percentage'],
      ['Yes',     10], //This static data needs to reflect dynamic data from html table
      ['No',      3], //This static data needs to reflect dynamic data from html table
      ['Maybe',  7], //This static data needs to reflect dynamic data from html table
    ]);

    var options = {
      title: 'My Daily Activities'
    };

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

    chart.draw(data, options);
  }
</script>
</head>
<body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>

HTML Table:

<table border="1" id="results">
    <td>Result</td>
    <td> <?php echo $q['answer']; ?> </td>
</table>

html table 用这一行显示它的数据：

<td><?php echo $q['answer']; ?></td>

'answer' 可以是、否或可能是通过此处其他地方的分析定义的：

function findAnswer($question) {
    $results=array();
    foreach($question['answer'] as $q) {
            $answer=$API->Analysis($answer['text']);
            if($answer!=false) {
                $results[]=array(
                    'answer'=>$answer,
                    );
            }
        }     
    }

我需要饼图来反映答案是、否或者总结 html table。

我怎样才能让圆周率图反映出这样的东西（如下），每次重新提交查询时答案都会改变？：

$q['answer']=='yes'
$q['answer']=='no'
$q['answer']=='maybe'

提前致谢，多年来一直在尝试不同的方法！

Answer 1

这是一种方法...

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

function drawChart() {
  // init google table
  var dataTable = new google.visualization.DataTable({
      cols: [
        { label: 'Answer', type: 'string' },
        { label: 'Result', type: 'number' }
      ]
  });

  // get html table rows
  var results = document.getElementById('results');
  Array.prototype.forEach.call(results.rows, function(row) {
    // exclude column heading
    if (row.rowIndex > 0) {
      dataTable.addRow([
        { v: (row.cells[0].textContent || row.cells[0].innerHTML).trim() },
        { v: 1 }
      ]);
    }
  });

  var dataSummary = google.visualization.data.group(
    dataTable,
    [0],
    [{'column': 1, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
  );

  var options = {
    title: 'My Daily Activities'
  };

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

table {
  border-collapse: collapse;
}
td, th {
  border: 1px solid black;
  padding: 4px 4px 4px 4px;
  text-align: center;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<table id="results">
  <thead>
    <tr>
      <th>Answer</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Yes</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>Yes</td>
    </tr>
    <tr>
      <td>Yes</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>No</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>Yes</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>No</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>Yes</td>
    </tr>
    <tr>
      <td>No</td>
    </tr>
    <tr>
      <td>Yes</td>
    </tr>
    <tr>
      <td>No</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>Yes</td>
    </tr>
    <tr>
      <td>No</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>Yes</td>
    </tr>
    <tr>
      <td>No</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>Yes</td>
    </tr>
    <tr>
      <td>No</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>Yes</td>
    </tr>
    <tr>
      <td>No</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>Yes</td>
    </tr>
    <tr>
      <td>No</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>Yes</td>
    </tr>
    <tr>
      <td>No</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>Yes</td>
    </tr>
    <tr>
      <td>No</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>Yes</td>
    </tr>
    <tr>
      <td>No</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>Yes</td>
    </tr>
    <tr>
      <td>No</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
  </tbody>
</table>

Answer 2

动态饼图使用 google 图表 api

google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(function() {
  drawLeadChart("source", resp.source, 'count');
});
google.charts.setOnLoadCallback(function() {
  drawLeadChart("priority", resp.priority, 'count');
});
google.charts.setOnLoadCallback(function() {
  drawLeadChart("location", resp.location, 'count');
});
google.charts.setOnLoadCallback(function() {
  drawLeadChart("budget", resp.budget, 'count');
});

function drawLeadChart(charClass, apiLeadData, sourceType) {

  // Create the data table for Sarah's pizza.
  var data = new google.visualization.DataTable();
  var obj = [];
  $.each(apiLeadData, function(i, ele) {
    let innerArr = new Array();
    innerArr.push(ele.last_name);
    if (sourceType == 'roi') {
      innerArr.push(ele.sum / ele.count);
    } else {
      innerArr.push(ele[sourceType]);
    }
    obj.push(innerArr);
  });
  data.addColumn('string', 'Topping');
  data.addColumn('number', 'Slices');
  data.addRows(obj);
  var options = {
    legend: {
      position: 'left',
      textStyle: {
        fontSize: 14
      }
    },
    responsive: true,
    chartArea: {
      left: 15,
      right: 10,
      top: 0,
      bottom: 20,
      width: '100%',
      height: '100%'
    },
    width: '100%'
  };
  // Instantiate and draw the chart for Sarah's pizza.
  var chart = new google.visualization.PieChart(document.getElementById(charClass));
  chart.draw(data, options);
}

输出 This is how it looks

如何使用动态数据创建 Google 饼图？

How to create a Google Pie Chart with dynamic data?

javascript

dynamic

charts

google-visualization

pie-chart