使用php和ajax在div中动态显示google图表
我试图在一个php页面中显示多个结果,其中一个是从mysql数据库获取数据的Google饼图。如果没有ajax,我可以成功地单独显示此图表,但是使用ajax在同一页面上显示图形是不走运的 下面的代码可以工作,但单击按钮它会重定向到ajax\u graph\u temp.php,并在该页面上显示图形。我想使用ajax在同一页面上显示图形,即ajax_form.php 问题是ajax_graph.php在使用php和ajax在div中动态显示google图表,php,javascript,ajax,google-visualization,Php,Javascript,Ajax,Google Visualization,我试图在一个php页面中显示多个结果,其中一个是从mysql数据库获取数据的Google饼图。如果没有ajax,我可以成功地单独显示此图表,但是使用ajax在同一页面上显示图形是不走运的 下面的代码可以工作,但单击按钮它会重定向到ajax\u graph\u temp.php,并在该页面上显示图形。我想使用ajax在同一页面上显示图形,即ajax_form.php 问题是ajax_graph.php在div中显示结果,它只存在于其中。如何在ajax\u form\u temp.php中显示它 我
div
中显示结果,它只存在于其中。如何在ajax\u form\u temp.php中显示它
我的ajax\u form\u temp.php:
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
<meta content="utf-8" http-equiv="encoding" />
<script type="text/javascript">
function viewChart(form, e){
e.preventDefault();
e.returnValue=false;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open(form.method, form.action, true);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send();
}
//------------------Chart function end
</script>
</head>
<body>
<form action="ajax_graph_temp.php" method="post"/>
<h4>CLICK TO VIEW CHART</h4>
<input type="submit" class="submit" value="submit" name="view"/>
</form>
<br />
<div id="txtHint">
<b>Person info will be listed here.</b>
</div>
</body>
</html>
功能视图图表(表格e){
e、 预防默认值();
e、 returnValue=false;
if(window.XMLHttpRequest){//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest();
}
else{//IE6、IE5的代码
xmlhttp=新的ActiveXObject(“Microsoft.xmlhttp”);
}
xmlhttp.onreadystatechange=函数(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
document.getElementById(“txtHint”).innerHTML=xmlhttp.responseText;
}
}
open(form.method、form.action、true);
setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xmlhttp.send();
}
//------------------图表功能结束
单击以查看图表
此处将列出人员信息。
而ajax_graph_temp.php是:
<?php
echo "hi";
$mysqli =mysqli_connect('127.0.0.1:3306', 'root', 'root', 'test');
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: ".mysqli_connect_error();
}
$result = $mysqli->query('SELECT * FROM new_view');
$rows = array();
$table = array();
$table['cols'] = array(
array('label' => 'ind_type', 'type' => 'string'),
array('label' => 'Index_val', 'type' => 'number')
);
/* Extract the information from $result */
foreach($result as $r) {
$temp = array();
// The following line will be used to slice the Pie chart
$temp[] = array('v' => (string) $r['ind_type']);
// Values of the each slice
$temp[] = array('v' => (int) $r['Index_val']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
// convert data into JSON format
$jsonTable = json_encode($table);
//echo $jsonTable;
?>
<html>
<head>
<!--Load the Ajax API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable(<?=$jsonTable?>);
var options = {
title: 'Index analysis',
is3D: 'true',
width: 800,
height: 600
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--this is the div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
//加载可视化API和piechart包。
load('visualization','1',{'packages':['corechart']});
//将回调设置为在加载Google Visualization API时运行。
setOnLoadCallback(drawChart);
函数绘图图(){
var data=new google.visualization.DataTable();
变量选项={
标题:“指数分析”,
is3D:'正确',
宽度:800,
身高:600
};
var chart=new google.visualization.PieChart(document.getElementById('chart_div');
图表绘制(数据、选项);
}
这里有点不赞成粘贴整个文件。如果你只发布相关代码,你会更幸运地找到答案。@SomeKittens:我已经更新了代码,删除了不相关的代码!谢天谢地,拼写错误也不是一件令人不快的事:-)