Question

我正在做的是在用户点击按钮时显示图表。该图表是使用javascript从PHP文件中获取的。这是我正在做的代码。

这是获取图形并将其附加到HTML DOM

的javascript函数

function draw_graph(num) {

   var xmlhttp;
   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) {
        var output = xmlhttp.responseText;
        document.getElementById('script_content').innerHTML = output;
       }
   }
   xmlhttp.open("GET","includes/getgraphdata.php?type="+num+"&mode=day",true);
   xmlhttp.send();

}

这是PHP代码，我试图用虚拟数据绘制一个简单的图形

    <?php

echo "
    <script type=\"text/javascript\" src=\"https://www.google.com/jsapi\"></script>
        <script type=\"text/javascript\">                   
                        google.load('visualization', '1', {packages:['corechart']});
                        google.setOnLoadCallback(drawChart);
                        function drawChart() {
                            var data = new google.visualization.DataTable();
                            data.addColumn('string', 'Date');
                            data.addColumn('number', 'Sell');
                            data.addColumn('number', 'Purchase');
                            data.addRows([
                              ['12-03-2012', 150, 300],
                              ['12-04-2012', 250, 500]
                            ]);

                            var options = {
                              title: 'Graph'
                            };
                            var chart = new google.visualization.LineChart.(document.getElementById('temp'));
                            chart.draw(data, options);
                        }
                    </script>
    ";

以上代码正确附加了HTML DOM，但图表未显示。

Answer 1

这一行

 var chart = new google.visualization.LineChart.(document.getElementById('temp'));

在.之后移除LineChart。因此，它是LineChart(document.getElementById('temp'));

还在上一行和下一行之间放置一个alert("statement reached");来跟踪错误。如果发生错误，则可能无法执行下一行，因此将其用作调试优势。

Answer 2

之前我尝试过，你不能使用ajax包含文本javascript代码。

如果您真的想这样做，您必须eval() responseText字符串或让javascript根据返回的字符串执行某些操作。

例如

if(responseText == '1'){
 function1();
}else{
 function2();
}

你有什么理由不能只包含php文件吗？

<?php
require_once 'googleapi.php';
?>

Google图表API未使用javascript / ajax显示图表

2 个答案: