我正在努力获取下面的 Google 饼图来反射(reflect)同一页面上的 html 表格中找到的动态数据。
<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 border="1" id="results">
<td>Result</td>
<td> <?php echo $q['answer']; ?> </td>
</table>
html 表格用此行显示其数据:
<td><?php echo $q['answer']; ?></td>
“答案”可以是是、否，或者可能是通过此处其他地方的分析来定义的:
function findAnswer($question) {
$results=array();
foreach($question['answer'] as $q) {
$answer=$API->Analysis($answer['text']);
if($answer!=false) {
$results[]=array(
'answer'=>$answer,
);
}
}
}
我需要饼图来反射(reflect)是、否的答案，或者可能总结 html 表格。
如何让 pi 图表反射(reflect)类似如下(如下)的内容，其中每次重新提交查询时答案都会发生变化？:
$q['answer']=='yes'
$q['answer']=='no'
$q['answer']=='maybe'
提前致谢，多年来一直在尝试不同的方法!
最佳答案
这是一种方法...
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>关于javascript - 如何使用动态数据创建 Google 饼图？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35638365/