Question

我已经创建了一个PHP文件，它显示了一些计算值以及使用Google Chart显示此数据的可视化。如果我只是直接打开这个PHP一切正常。

所以我的下一步是在使用jQuery单击按钮时将此PHP（包括谷歌图表）加载到另一个页面。我遇到的问题是计算值显示没有问题，但图表没有。使用Firebug我发现加载google API的问题一定存在于PHP文件中（图表可视化所需）。我已经尝试过多次尝试在调用PHP文件的页面中加载API（甚至使用jquerys getscript），但没有成功。

有没有人知道我在这里缺少什么，或者我怎么能让这张图表出现？

非常感谢你的帮助！

这是PHP文件（没有PHP部分）：

<html>
<head>
    <title>Analyseergebnis</title>
    <!--Load the AJAX API-->
    <!-- +++++++++++++++++++   Definition von Google Charts   +++++++++++++++++++++ -->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body>
    <div style='width:300px; text-align:center; background-color:lightgrey; padding-top:5px; padding-bottom:5px;'><b>A N A L Y S E E R G E B N I S</b></div>
    <p />


<!-- +++++++++++++++++++   HERES THE PHP PART - NOT SHOWN HERE  +++++++++++++++++++++ -->

    .....................

<!-- +++++++++++++++++++   Aufruf des Diagramms   +++++++++++++++++++++ -->

    <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);

        // Callback that creates and populates a data table, 
        // instantiates the pie chart, passes in the data and
        // draws it.
        function drawChart() {

            // Create our data table.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Topping');
            data.addColumn('number', 'Slices');
            data.addRows([
                ['Wiesen', <?php echo str_replace(',', '.', $row_wiesen[0]); ?>],   // Konversion da Google Charts als ',' nur '.' akzeptiert
                ['Acker', <?php echo str_replace(',', '.', $row_acker[0]); ?>],
                ['versiegelt', <?php echo str_replace(',', '.', $row_versieg[0]); ?>],
                ['Laubwald', <?php echo str_replace(',', '.', $row_lwald[0]); ?>],
                ['Nadelwald', <?php echo str_replace(',', '.', $row_nwald[0]); ?>],
                ['Wasser', <?php echo str_replace(',', '.', $row_wasser[0]); ?>],
                ['Unklassifiziert', <?php echo str_replace(',', '.', $row_na[0]); ?>]
            ]);

            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.PieChart(document.getElementById('gchart'));
            chart.draw(data, {width: 300, height: 200, colors:['#006400','#CD853F','#C0C0C0','#228B22','#556B2F','#1E90FF','#000000'], legend: 'right',  chartArea:{width:"90%", height:"85%"}, pieSliceText:"none"});
        }
    </script>


<div id="gchart"></div>

</body>
</html>

这是我调用PHP文件的地方：

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
    #map {
        width: 800px;
        height: 475px;
        border: 1px solid grey;
    }
 </style>
 <script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us"></script>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>

++++++++++ HERE COMES THE OPENLAYERSPART - NOT SHOWN HERE +++++++++++
 </head>

  <body onload="initmap()">

<table>
    <tr>
        <td>
            <div id="map"></div>
        </td>
        <td valign="top">
            <div id="div1" style="display:visible;">
            <button id="ajaxloadlink" type="submit">A N A L Y S E starten</button>
            </div>

            <div id="ajaxcontent" style="font-family:Verdana; font-size:9pt">
                - Bitte zuerst Suchpolygone erfassen! -
            </div>
            <div id="div2" style="display:none; text-align:right;">
                <input type="button" id="ajaxbacklink" value="NEUE Analyse starten" onclick="clearLayerVector()">
            </div>
        </td>
    </tr>
</table>

<script type="text/javascript">
    $.ajaxSetup ({  
        cache: false        // Browser soll den AJAX-Befehl nicht cachen, da PHP-file mehrmals hintereinander abgerufen wird
    });
    $.toggle = function(query)
    {
            $(query).toggle("fast");
    }
    $("#ajaxloadlink").click(function(){
        $.toggle('#div1');
        $("#ajaxcontent").empty().html('<div style="width:300px; text-align:center;"><p><img src="../web/loader.gif" /></p></div>');
        $("#ajaxcontent").load("../web/abfrage.php");
        $.toggle('#div2');
    });
    $("#ajaxbacklink").click(function(){
        //document.getElementById('ajaxcontent').style.display   = "none";
        $("#ajaxcontent").empty().html('<div id="ajaxcontent">- Bitte zuerst Suchpolygone erfassen! -</div>');
        $.toggle('#div2');
        $.toggle('#div1');
    });
</script>

 </body>
</html>

非常感谢你的帮助！

感谢您的建议。唯一的问题是我不是那么大的jQuery程序员，我不确定你链接的帖子的内容是什么。我用一个非常简化的版本运行了一些测试，仅在按下按钮时显示谷歌图表（代码如下所示），但没有成功。似乎仍然无法识别JScript代码。我唯一注意到的是，必须在源代码中定义-tag后，具有其中函数的jquery代码是必不可少的。

这里有两个试图加载图表的简单文件（我想它应该很容易重现我得到的错误）：

gchart.htm - 这是jQuery将调用的文件 - 如果你自己只运行这个文件，你会看到图表显示没有问题：

<html>
<head>
    <title>Testwiese</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="gchart.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);

        // Callback that creates and populates a data table, 
        // instantiates the pie chart, passes in the data and
        // draws it.
        function drawChart() {

            // Create our data table.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Topping');
            data.addColumn('number', 'Slices');
            data.addRows([
                ['Wiesen', 2],
                ['Acker', 3],
                ['versiegelt', 6],
                ['versiegelt', 6]
            ]);

            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.PieChart(document.getElementById('gchart'));
            chart.draw(data, {width: 300, height: 200, colors:['#006400','#CD853F','#C0C0C0','#228B22','#556B2F','#1E90FF','#000000'], legend: 'right',  chartArea:{width:"90%", height:"85%"}, backgroundColor: 'white', pieSliceText:"none"});
        }
    </script>
</head>
<body>
    <div id="gchart"></div>
</body>
</html>

和gchart_test.htm - 带有调用上述文件的按钮的文件：

<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

</head>
<body>

    <input type="button" id="gshow" value="Test Gchart">

    <div id="gchart"></div>

    <script type="text/javascript">
        //  load() functions
        var loadUrl = "gchart.htm";  
        $("#gshow").click(function(){  
        $("#gchart").load(loadUrl);
        });
    </script>
</body>
</html>

我很抱歉，但在这一点上，我不知道从您发送给我的链接或我的文件中要更改的内容中读取什么。如果您运行这两个文件，您将看到加载过程崩溃并且很奇怪，因为页面正试图联系谷歌......

Google Charts本身显然使用相同的技术来覆盖div-tag以显示图表，这可能是一个问题吗？

问题是我将代码分为两部分以用于目的。我想加载gchart_test.htm INTO gchart.htm因为在我的项目中gchart.htm只是一个更大的网站的例子，我想引导谷歌图表进入。并且在gchart.htm中只有6行代码，以便让其他人尽可能简单地看到我想要了解的内容。所以代码只是一个简化，所以每个人都可以重现我得到的错误。

Answer 1

看看这个jquery load() strips script tags - workaround?。我认为你的问题是一样的。

应该创建图表的脚本不会被执行，因为它被jQuery.load（）删除。

<强> gchart.html：

<html>
   <head>
     <title>Testwiese</title>
   </head>
   <body>
      <div id="gchart"></div>
   </body>
</html>

<强> gchart_test.html：

<html>
  <head>
     <script src="http://code.jquery.com/jquery-latest.js"></script>
     <script type="text/javascript" src="https://www.google.com/jsapi"></script>
     <script src="http://code.jquery.com/jquery-latest.js"></script>
     <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="gchart.js"></script>
    <script type="text/javascript">
      // Load the Visualization API and the piechart package.
      google.load('visualization', '1', {'packages':['corechart']});
    </script>
  </head>
  <body>

<input type="button" id="gshow" value="Test Gchart">

<div id="gchart"></div>

<script type="text/javascript">
    //  load() functions
    var loadUrl = "gchart.htm";  
    $("#gshow").click(function(){  
    $("#gchart").load(loadUrl, function(){
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
            ['Wiesen', 2],
            ['Acker', 3],
            ['versiegelt', 6],
            ['versiegelt', 6]
        ]);

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('gchart'));
        chart.draw(data, {width: 300, height: 200, colors:['#006400','#CD853F','#C0C0C0','#228B22','#556B2F','#1E90FF','#000000'], legend: 'right',  chartArea:{width:"90%", height:"85%"}, backgroundColor: 'white', pieSliceText:"none"});
        });
      });
     </script>
   </body>
 </html>

我认为你应该合并这些文件。没有理由将~6行html分开。

使用jQuery加载PHP文件，包括Google Chart：图表永远不会出现！

1 个答案: