这是我用来显示图表和票数的代码。它运行得很好。
在这段代码中,当我点击刷新按钮时,投票会被更新而不刷新页面。我该怎么做?
<div id="barchart" style="width: 100%; height: 200px;margin-top:0px;"></div>
<button>Refresh</button>
<?php
$q_id = $row['q_id'];
include "connection.php";
$sql1 = mysql_query("SELECT * FROM votes where q_id='$q_id'");
$count1 = mysql_num_rows($sql1);
$sql2 = mysql_query("SELECT * FROM votes where q_id='$q_id' and answer='Yes'");
$count2 = mysql_num_rows($sql2);
$sql3 = mysql_query("SELECT * FROM votes where q_id='$q_id' and answer='No'");
$count3 = mysql_num_rows($sql3);
?>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});google.setOnLoadCallback(drawChart);
google.setOnLoadCallback(render_applicant_sources);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Task');
dataTable.addColumn('number', 'Hours per Day');
// A column for custom tooltip content
dataTable.addColumn({type: 'string', role: 'tooltip'});
dataTable.addRows([
['<?php echo "Yes"; echo " "; echo ' ('.$count2.' '.$vname1.')'; ?>', <?php echo $count2; ?> ,'<?php echo "Yes"; ?>'],
['<?php echo "No"; echo " "; echo ' ('.$count3.' '.$vname2.')'; ?>', <?php echo $count3; ?>,'<?php echo "No"; ?>']
]);
var chart = new google.visualization.PieChart(document.getElementById('barchart'));
var options = {
backgroundColor: 'transparent',
pieSliceText:'none',
chartArea: {top: 10},
titleTextStyle: {bold: false},
enableInteractivity: false,
legend: {position: 'labeled',textStyle: {color: '#000',fontSize:13}},
height:250,
fontName:"'Source Sans Pro', sans-serif",
tooltip: {
text: 'value'
}
};
chart.draw(dataTable, options);
}
实现这一点的最常见方法:
- 与其使用内联PHP从数据库加载数据,不如使用服务,这是一个专用的URL,它(使用相同的PHP)以JSON格式(最好)返回这些数据。然后在加载页面并将其存储在某些JavaScript数据结构中时,进行AJAX JavaScript调用以获取这些数据
- 不要使用内联PHP在图表中插入这些数据,而是使用前面提到的JavaScript数据
如果您以这种方式获取数据,您的刷新按钮只需再次执行以下步骤:从服务URL获取新数据,并在此基础上重新绘制图表。这种设计有时被称为面向服务的体系结构(SOA)。