0

我之前在这里问过这个问题，但没有人告诉我如何通过load function.I 实际显示谷歌图表。我使用谷歌图表 API 并且图表在普通页面上显示正常..但是，当我调用包含图表代码通过jquery加载函数，没有显示，但是在其他页面上显示了相同的代码..我需要为此使用加载函数，因为只要您单击图像比较两个人，图表就会有从通过 Jquery 加载创建的页面中显示。

下面是我通过加载函数调用的谷歌图表代码，如果有人能查明问题出在哪里，我将不胜感激。

//This is the compare_proc.php created the charts 

    <html> <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" type="text/css" href="css/madscore.css">
    <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>

            <!-- load Google AJAX API -->
            <script type="text/javascript" src="http://www.google.com/jsapi"></script>
            <script type="text/javascript">
                //load the Google Visualization API and the chart
                google.load('visualization', '1', {'packages':['columnchart','piechart']});

                //set callback
                google.setOnLoadCallback (createChart);

                //callback function
                function createChart() {

                    //create data table object
                    var dataTable = new google.visualization.DataTable();

                   //create data table object
                    var dataTableMulticolumn = new google.visualization.DataTable();


                    //define columns for first example
                    dataTable.addColumn('string','Scores');
                    dataTable.addColumn('number', 'Results');

                    //define columns for second example
                    dataTableMulticolumn.addColumn('string','Scores');
                    dataTableMulticolumn.addColumn('number', 'Results');
                    dataTableMulticolumn.addColumn('number', 'Results');
                    dataTableMulticolumn.addColumn('number', 'Results');



                    //define rows of data for first example
                    dataTable.addRows([['Junk', 10], ['Good', 10],['Bad', 10],['Dont care', 10],['OK', 10],['Super', 10]]);

                    //define rows of data for secondf example
                    dataTableMulticolumn.addRows([['Junk',0,0,0], ['Favor',10,10,10],['DontCare',375,350,235],['BigFans', 123,100,387]]);

                    //instantiate our chart objects
                    var chart = new google.visualization.ColumnChart (document.getElementById('Chart'));
                    var secondChart = new google.visualization.PieChart (document.getElementById('Chart2'));

                    //instantiate our multicolumn chart
                    var multiColumnChart = new google.visualization.ColumnChart (document.getElementById('Chart3'));

                    //instantiate a new chart to use as dataView Example
                    var pieChartWithView = new google.visualization.PieChart (document.getElementById('Chart4'));

                    //instantiate our Event example chart
                    var eventsChart = new google.visualization.ColumnChart (document.getElementById('Chart5'));

                    //create a view of the multicolumn data table
                    var view = new google.visualization.DataView(dataTableMulticolumn);

                    //filter it to get only first two columns
                    view.setColumns([0, 1]);

                    //define options for visualization
                    var options = {width: 400, height: 240, is3D: true, title: 'Statistical representation of scores by opinion '};

                    //draw our chart charts
                    chart.draw(dataTable, options);
                    secondChart.draw(dataTable, options);
                    multiColumnChart.draw(dataTableMulticolumn, options);
                    pieChartWithView.draw(view, options);
                    eventsChart.draw(dataTable, options);


                   //register callbacks
                    google.visualization.events.addListener(eventsChart, 'onmouseover', showDetails);
                    google.visualization.events.addListener(eventsChart, 'onmouseout', hideDetails);

                }

                function showDetails(e) {
                    switch (e['row']) {
                        case 0: document.getElementById('details0').style.visibility='visible';
                            break;
                        case 1: document.getElementById('details1').style.visibility='visible';
                            break;
                        case 2: document.getElementById('details2').style.visibility='visible';
                            break;
                        case 3: document.getElementById('details3').style.visibility='visible';
                            break;
                    }
                }


                function hideDetails(e) {
                    switch (e['row']) {
                        case 0: document.getElementById('details0').style.visibility='hidden';
                            break;
                        case 1: document.getElementById('details1').style.visibility='hidden';
                            break;
                        case 2: document.getElementById('details2').style.visibility='hidden';
                            break;
                        case 3: document.getElementById('details3').style.visibility='hidden';
                            break;
                    }
                }


            </script>
    </head>

    <body>

    <div id="charts">
    <div id="Chart2"></div>
     </div>

    </body>
    </html>

// 下面是调用 compare_proc.php 页面的 Jquery 代码，该页面具有我在上面复制的谷歌图表代码..

    jQuery(document).ready(function() {
                  $("#opposition a").click(function(e) {
                  var first_id  = $(this).attr('id');
                  var second_id = $("h1").attr('id');
                  $("#opposition img").mouseover(function() {
                  $(this).css('border-width','10px');
            });
                  $("#opposition img").mouseout(function() {
                  $(this).css('border-width','2px');
            });
                  $("div#test").load('compare_proc.php','id=' + first_id + '&id2=' + second_id);
                  e.preventDefault();
                    });
        });
4

0 回答 0