Question

我可以看到我的（var control = new google.visualization.ControlWrapper（{controlType：'ChartRangeFilter'，containerId：'control'），我看不到我的（var ComboChart = new google.visualization.ChartWrapper（ {chartType：'ComboChart'，containerId：'chart1'，）我的页面中出现此错误（一个或多个参与者无法绘制（））并在控制台中出现此错误（[15：34：41,596]Unechaînevideaé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);

Answer 1

这似乎与Google Visualization API论坛（here）中发布的问题重复，但对于StackOverflow群体，以下是我的回复：

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

您正在使用选项填充<select>元素，然后立即触发“更改”事件处理程序，该处理程序希望存在选定的<option>，但您没有设置默认的选定选项，所以这将返回null（或未定义，或错误输出，具体取决于浏览器的挑剔程度）。
您正在创建一个ID为“ComboChart”的新div，并将其附加到ID为“ComboChart”的div。如果“ComboChart”已经存在，那么您违反了要求元素具有唯一ID的HTML规则（这可能会导致此问题）;如果“ComboChart”尚未存在，那么您无法将新div附加到DOM，因此图表无处可绘。
Visualization API在另一个函数调用中加载时出现问题。将google.load和google.setOnLoadCallback来电保留在任何其他功能之外是安全的
您正在尝试加载Visualization API两次：
```
google.load('visualization', '1', {packages: ['corechart']});
google.load('visualization', '1.1', {packages: ['controls']});
```
当你应该只加载一次。您需要“controls”包来使用仪表板功能，ControlWrappers和ChartWrappers;除非您有特定需要使用候选版本，否则应加载版本1：
```
google.load('visualization', '1', {packages: ['controls']});
```

一个由控件和仪表板控制的COMBOCHART

1 个答案: