我目前正在使用FusionCharts Free填充一些图表。
main.php:
<html>
<head>
<script language="JavaScript" src="FusionCharts/FusionCharts.js" ></script>
<script language="JavaScript">
function ajax(divID)
{
if (window.XMLHttpRequest)
xmlhttp=new XMLHttpRequest();
else
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
document.getElementById(divID).innerHTML=xmlhttp.responseText;
}
return xmlhttp;
}
function detailedChart(couID)
{
xmlhttp = ajax("detailedDiv");
xmlhttp.open("GET", "getDetailedResult.php?couID=" + couID, true);
xmlhttp.send(null);
}
</script>
</head>
<body>
<?php
$strDataURL = "GetResult.php";
echo renderChart("FusionCharts/FCF_Column3D.swf", $strDataURL, "", "Chart1", 600, 300);
?>
<div id="detailedDiv" align="center"></div>
</body>
</html>
在GetResult.php中:
if ($result)
$chart -> addDataFromDatabase($result, "TOTAL", "NAME", "", "JavaScript:detailedChart('##ID##')");
在GetDetailedResult.php <?php
$chart -> newFusionCharts("Column3D", "900", "500");
$chart -> setSWFPath("FusionCharts/");
$chart -> setChartParams("caption=....");
$chart -> addDataFromDatabase($result, "TOTAL", "NAME");
$chart -> renderChart();
?>
现在的问题是我想创建钻下从gettresult到GetDetailedResult使用ajax,但它会显示我"图表",而不是图表。如果我改变
$chart -> renderChart();
它会显示bgcolor="
为什么会发生这种情况,我该如何解决它?有没有其他更简单的方法通过ajax填充detailedChart ?
百万谢谢。如果你调查,你会看到你得到HTML
(一个DIV
)和SCRIPT
(一些JavaScript代码在DIV
渲染图表)在你的responseText
。
现在,当您将responseText
设置为HTML元素的innerHTML
时,HTML DOM解析器将添加并显示HTML部分(带有文本chart
的DIV)。但是,它不执行SCRIPT
部分(该部分旨在在DIV
中呈现图表,以替换chart
文本)。
实现渲染的理想方法是执行SCRIPT
。
如果您使用jQuery
ajax函数,这是很好的管理,类似于:
function detailedChart(couID) {
jQuery.ajax({
url: "getDetailedResult.php?couID=" + couID,
success: function(responseText) {
jQuery("#detailedDiv").html(responseText);
}
});
}
注意:你需要在HTML的头部加载jquery js文件。