1. 首頁
  2. 問答
  3. FusionCharts PHP與Ajax

FusionCharts PHP與Ajax

2013-04-09 48 views
0

我目前正在使用FusionCharts免費來填充一些圖表。FusionCharts PHP與Ajax

在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(); 
?>

現在的問題是，我想創建向下鑽取從GetResult到使用Ajax的GetDetailedResult，但會顯示「Chart」。而不是圖表。如果我更改了

$ chart - > renderChart（）;到$ chart - > renderChart（true）;

它會告訴我bgcolor =「」。

爲什麼會發生這種情況，我該如何解決它？有沒有其他更簡單的方法來通過Ajax填充detailedChart？

萬分感謝。

來源

2013-04-09 noobie

回答

0

如果你調查，你會看到你在你的responseText獲得HTML（一DIV）和SCRIPT（一些JavaScript代碼來渲染圖中DIV）。

現在，當您設置responseText作爲一個HTML元素的innerHTML的HTML DOM解析器增加，並顯示HTML部分（DIV用一個文本chart）。但是，它不執行SCRIPT部分（即預期呈現DIV裏面的圖表替換chart文本。

實現渲染理想的方式是執行SCRIPT。

這很好，如果管理您使用jQueryajax功能，類似的東西：

function detailedChart(couID) { 
     jQuery.ajax({ 
      url: "getDetailedResult.php?couID=" + couID, 
      success: function(responseText) { 
       jQuery("#detailedDiv").html(responseText); 
      } 
     }); 

    }

注意：您需要加載jQuery的js文件在HTML的頭部

來源

2013-04-09 07:34:04 sudipto

+0

。感謝您介紹jQuery，事情真的變得更簡單了。我認爲在進一步編碼之前，我應該更好地瞭解所有這些工作。謝謝^^ – noobie 2013-04-09 08:06:44

相關問題

 相關問題