Question

我正在尝试使用谷歌图表事件监听器制作一些爆炸性的图表，比如饼图爆炸到一个表格，而这个表格又会爆炸到其他图表。[还有其他一些方法可以做到这一点会很感激你的建议。 ]

方法＆gt;我有一个饼图在页面上正确显示，点击它应该制作一个表（使用谷歌图表）与一些不同的内容的任何馅饼。（我对php页面的调用和返回的结果是正确的）但不知何故表格图表抛出错误。

我收到"container is not defined"错误。我在网上看了这个，有些人说我需要定义google.setOnLoadCallback，以便在调用之前加载所有divs。我试过但没有运气。我知道我在做一些愚蠢的事，任何帮助都会受到赞赏。

这是我的JS，我的html页面中定义了m_user_div和'module_div'。

    /*!ZZ
     * Column chart for Most Used Modules.
     * History
     * 2015-Aug-10
     */

    google.load('visualization', '1', {packages: ['corechart']});
    google.setOnLoadCallback(mostUsedModules);

    function mostUsedModules(param) {

            var syshost = param.value;
            var jsonChartData = $.ajax(
                            {
                            url: "include/mostUsedModules.php",
                            data: "sys="+syshost,
                            dataType:"json", async: false
                            }
                            ).responseText;

            // Create our data table out of JSON data loaded from server.
            var ChartData = new google.visualization.DataTable(
                            jsonChartData);

            // Define Chart Options .
            var options = {
                    title: 'Most Used Modules (Run Time)',
                           pieHole: 0.4,
                           sliceVisibilityThreshold: 0.4/8,
                           };


            // Instantiate and draw chart.
            var chart = new google.visualization.PieChart(document.getElementById('module_div'));
            chart.draw(ChartData, options);

    // ***CHART IS CORRECTLY SHOWN ON THE PAGE***

            // Add our selection handler.
            google.visualization.events.addListener(chart, 'select', selectHandler);

    function selectHandler(e) {
    // grab a few details before redirecting
       var selection = chart.getSelection();
       var row = selection[0].row;
       var col = selection[0].column;
       var module = ChartData.getValue(row,0);
       google.load('visualization', '1.1', {packages: ['table']});
       google.setOnLoadCallback(tableList(module));

    }

    function tableList(module) {

       //alert(ChartData.getValue(row,0) + ChartData.getValue(row,1));

       var jsonTableData = $.ajax(
                    {
                    url: "include/userList.php",
                    data: "module="+module,
                    datatype: "json", async: false
                    }
                    ).responseText;


// *** userList.php returns a valid data in json format ***

  // Create our datatable out of Json Data loaded from php call.

       var TableData = new google.visualization.DataTable(jsonTableData);

       google.load('visualization', '1.1', {packages: ['table']});

       var tab_options = {title: 'List of Users Used this Module',
               showRowNumber: true,
               alternatingRowStyle: true,
               height: 20}

       // Instantiate and Draw our Table
       var table = new google.visualization.Table(document.getElementById('m_user_div'));

       table.draw(TableData, tab_options);

    //location.href = 'http://www.google.com?row=' + row + '&col=' + col;

    }

我的html页面 -

                <div class="row">
                    <div class="col-md-4 col-sm-6 col-xs-12">
                        <div class="dashboard_graph x_panel">
                            <div class="row x_title">
                                <div class="col-md-6">
                                    <h2>Most Used Modules <small>Darter (2014-2015)</small>
                                        <ul class="nav navbar-right panel_toolbox">
                                            <li><a class="collapse-link" ><i class="fa fa-chevron-up"></i></a></li>
                                        </ul>
                                        <div class="clearfix"></div>
                                    </h2>
                                </div>
                            </div>

                            <div class="x_content">
                                <!-- <script type="text/javascript" src="js/google/mostUsedModules.js">
                                </script> -->
                                <div id="module_div"></div>
                            </div>
                        </div>
                    </div>  <!-- col-md -->


                    <div class="col-md-8 col-sm-6 col-xs-12">
                        <div class="dashboard_graph x_panel">
                            <div class="row x_title">
                                <div class="col-md-6">
                                    <h2>Most Used Modules <small>Darter (2014-2015)</small></h2>
                                    <ul class="nav navbar-right panel_toolbox">
                                        <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
                                    </ul>
                                    <div class="clearfix"></div>
                                </div>
                            </div>
                            <div class="x_content">
                                <script type="text/javascript" src="js/google/mostUsedModulesCompile.js">
                                </script>
                                <script type="text/javascript" src="js/google/mostUsedModules.js">
                                </script>
                                <div id="compile_module_div"></div>
                                <div id="m_user_div"></div>
                            </div>

                        </div>
                    </div>  <!-- col-md -->
                </div> <!-- row -->

Answer 1

我想我得到了修复。

在函数selectHandler中，我需要删除

google.load('visualization', '1.1', {packages: ['table']});
google.setOnLoadCallback(tableList(module));

然后在我的JS开头将包'table'添加到第一个google.load。

这解决了这个问题，因为我知道在调用JS之前div没有被加载，虽然这是我已经在问题中写的东西（基于我的搜索）我从来不知道在哪里敲击锤子。另外，感谢gyanni_guy感谢您的帮助。

似乎再次加载可视化似乎重置/删除已经加载到那时的div。

第一行现在看起来像这样

google.load('visualization', '1', {packages: ['corechart','table']});

谷歌可视化 - 点击事件调用其他谷歌图表

1 个答案: