如何使用动态数据创建Google饼图? [英] How to create a Google Pie Chart with dynamic data?
本文介绍了如何使用动态数据创建Google饼图?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在努力获取下面的Google饼图，以反映在同一页面的html表中找到的动态数据.
I'm struggling to get the below google pie chart to reflect dynamic data found within a html table on the same page.
<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表使用以下行显示其数据:
The html table displays its data with this line:
<td><?php echo $q['answer']; ?></td>
答案"可以为是"，否"或通过在此处其他位置进行的分析来定义:
The 'answer' can be yes, no or maybe which is defined through analysis elsewhere seen here:
function findAnswer($question) {
$results=array();
foreach($question['answer'] as $q) {
$answer=$API->Analysis($answer['text']);
if($answer!=false) {
$results[]=array(
'answer'=>$answer,
);
}
}
}
我需要饼图来反映答案，是，否或总结html表.
I need the pie chart to reflect the answers yes, no or maybe to summarize the html table.
如何获取pi图表以反映如下所示(如下所示)，每次重新提交查询时答案都会改变?:
How can I get the pi chart to reflect something like this (below) where answers can change every time the the query is resubmitted?:
$q['answer']=='yes'
$q['answer']=='no'
$q['answer']=='maybe'
预先感谢，绝对年龄以来一直尝试不同的方法！
Thanks in advance, been trying different methods for absolutely ages!
推荐答案
这是一种方法...
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>
这篇关于如何使用动态数据创建Google饼图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
