Javascript 一个通过控件和仪表板进行控制的组合图

我可以看到我的（var control=new google.visualization.ControlWrapper（{controlType:'ChartRangeFilter'，containerId:'control'，）而看不到我的（var ComboChart=new google.visualization.ChartWrapper（{chartType:'ComboChart'，containerId:'chart1'，）我的页面中有此错误（一个或多个参与者未能绘制（）控制台中的这个错误（[15:34:41596]未提供传输«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);

！函数（$）{
//load（'visualization'，'1.0'，{'packages'：['table']}）；
load（'visualization'，'1'，{packages:['corechart']}）；
load（'visualization'，'1.1'，{packages:['controls']}）；
setOnLoadCallback（初始化）；
函数使用选项（目标、数据）填充selects
{
console.log（数据、类型（数据））；
变量$select=$（“#”+目标）；
$select.empty（）；
对于（var i=0；i这似乎与Google Visualization API论坛（）中发布的问题重复，但对于StackOverflow人群，我的回答如下：

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

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

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

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

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