FusionCharts PHP 与 Ajax答案

【问题标题】：FusionCharts PHP with AjaxFusionCharts PHP 与 Ajax
【发布时间】：2013-04-09 15:55:48
【问题描述】：

我目前正在使用 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();
?>

现在的问题是我想使用 ajax 创建从 GetResult 到 GetDetailedResult 的向下钻取，但它会显示“图表”。而不是图表。如果我改变了

$chart -> 渲染图表();到 $chart -> renderChart(true);

它会显示 bgcolor=""。

为什么会发生这种情况，我该如何解决？还有其他更简单的方法可以通过 ajax 填充 detailChart 吗？

万分感谢。

【问题讨论】：

标签： php ajax fusioncharts

【解决方案1】：

如果您进行调查，您会发现您的responseText 中出现了HTML（DIV）和SCRIPT（用于在DIV 中呈现图表的一些JavaScript 代码）。

现在，当您将 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 文件。

【讨论】：

感谢您介绍 jQuery，事情真的变得更简单了。我认为在进一步编码之前，我应该更好地了解所有这些是如何工作的。谢谢^^