0

我可以看到我的 (var control = new google.visualization.ControlWrapper({ controlType: 'ChartRangeFilter', containerId: 'control',) 我看不到我的 (var ComboChart = new google.visualization.ChartWrapper({ chartType: 'ComboChart', containerId: 'chart1',) 我的页面中有这个错误（一个或多个参与者无法绘制（））和控制台中的这个错误（[15:34:41,596] Une chaîne vide a été transmise à « getElementById())

这是我的代码：

!function($) { 

    //google.load('visualization', '1.0', {'packages':['table']});
    google.load('visualization', '1', {packages: ['corechart']});
    google.load('visualization', '1.1', {packages: ['controls']});
    google.setOnLoadCallback(initialize);


    function populateSelectWithOptions(target, data)
    {
        console.log(data, typeof(data));
        var $select =$("#"+target);
        $select.empty();
        for(var i=0; i <data.length;i++){
        $select.append($("<option>").attr("value", data[i]).text(data[i]));
        }

        $select.prop('disabled', false);
        $select.change(function (){
            var e = document.getElementById("groupe");
            var strUser = e.options[e.selectedIndex].value;
            //alert(strUser);
            sendQuery(strUser)

        });

        // baraie inke vaghti bara avalin bar safe lod mishavad dar chekbox chizi vojod dashte bashad
        $select.trigger('change');
        //console.log(populateSelectWithOptions(target, data));
        };


       function sendQuery(cityName) {
            // You can manipulate the variable response
            // Success!  
          var query = new google.visualization.Query('http://api.XXX.com/XXX/datasource?table='+cityName);

          query.setQuery("select (cost_reportings_timestamp), sum (cost_reportings_cost) group by (cost_reportings_timestamp)  pivot ecoadmin_zone_name");
            //Send the query with a callback function.
          query.send(drawChart);
        //console.log(response);
        }


       function drawChart(response) {
             if (response.isError()) {
             alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
             return;
        }   
             var data = response.getDataTable();
             console.log(data);

             var control = new google.visualization.ControlWrapper({
                    controlType: 'ChartRangeFilter',
                    containerId: 'control',
                    options: {
                        // Filter by the date axis.
                        filterColumnLabel: 'cost_reportings_timestamp',
                        ui: {
                            chartType: 'LineChart',
                            chartOptions: {
                                chartArea: {
                                    width: '90%'
                                },
                                hAxis: {
                                    baselineColor: 'none'
                                }
                            },
                            // Display a single series that shows the closing value of the stock.
                            // Thus, this view has two columns: the date (axis) and the stock value (line series).
                            chartView: {
                                columns: [0,1]
                            }
                        }
                    },
                    //Initial range: 2010 to 2021
                    state: {
                        range: {
                            start: new Date(2012),
                            end: new Date(2019)
                        }
                    }
                })

             // Define a bar chart
                var ComboChart = new google.visualization.ChartWrapper({
                    chartType: 'ComboChart',
                    containerId: 'ComboChart',
                    options: {
                        width: 400,
                        height: 300,
                        seriesType: 'bars',
                        isStacked:'True',
                        hAxis: {
                            minValue: 0,
                            maxValue: 60
                        },
                        chartArea: {
                            top: 0,
                            right: 0,
                            bottom: 0
                        },
                    },
                    view: {columns: [0, 1, 2, 3]}
                });

             // Create the dashboard.    
                var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard')).
                // Configure the slider to affect the bar chart
                bind([control], [ComboChart]).
                // Draw the dashboard
                draw(data);




       } 
        function initialize() {
            var $newDiv = $('<div>').attr('id','ComboChart');            
            $('#ComboChart').append($newDiv);

            $($newDiv).hide();  //hide the div here

            // Replace the data source URL on next line with your data source URL.
            // Specify that we want to use the XmlHttpRequest object to make the query.
            getTable();
        } 
             // baraie inke vaghti ro elemenha click mikonim piecharto ieshon bede
            $("#groupe").change( function () {
            $('#ComboChart').toggle(); //If it is visible hide it or vice versa
              //..
        });

    function getTable() {
            $.getJSON('call/json/mytables', {}, function (response){
            console.log(response);
            populateSelectWithOptions("groupe", response);
        })
        }

}(jQuery);
4

1 回答 1

1

这似乎与 Google 可视化 API 论坛（此处）中发布的问题重复，但对于 StackOverflow 人群，这是我的回复：

我在这里看到了一些潜在的问题：

  1. 您正在<select>使用选项填充一个元素，然后立即触发“更改”事件处理程序，该处理程序期望有一个 selected <option>，但您没有设置默认的 selected 选项，因此这将返回 null （或未定义，或错误输出，取决于浏览器的挑剔程度）。
  2. 您正在创建一个 ID 为“ComboChart”的新 div，并将其附加到一个 ID 为“ComboChart”的 div。如果“ComboChart”已经存在，则您违反了要求元素具有唯一 ID 的 HTML 规则（这可能会导致此问题）；如果“ComboChart”不存在，那么您将无法将新 div 附加到您的 DOM，因此图表无处可绘制。
  3. Visualization API 在另一个函数调用中加载时出现问题。将google.loadandgoogle.setOnLoadCallback调用放在任何其他函数之外以确保安全

  4. 您正在尝试加载 Visualization API 两次：

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

    当你应该只加载一次。您需要“控件”包才能使用仪表板功能、ControlWrappers 和 ChartWrappers；除非您有使用候选版本的特定需要，否则您应该加载版本 1：

    google.load('visualization', '1', {packages: ['controls']});
于 2013-08-06T16:11:38.967 回答