Google Dashboard对一个表的多个控件仅显示上一个控件

时间:2018-02-24 11:36:15

标签: google-visualization google-chartwrapper

问题:我在一个连接到一个表的仪表板中有三个控件,但只有最后一个控件显示在我的UI中。请运行下面的代码,注意prefServFilter是唯一出现的代码。

我遵循了这个Google documentation信息。我将控件放在一个数组中以绑定'多对一'。这是与我的情况有关的小片段:

  

//多对一的绑定,其中'ageSelector'和'salarySelector'同时发生   //参与选择'ageVsSalaryScatterPlot'可视化的数据。

     

dashboard.bind([agePicker,salaryPicker],ageVsSalaryScatterPlot);

我似乎无法弄清楚为什么会发生这种情况,是否有人看到了解决方案?我错过了什么?我还检查了Google的问题跟踪器,但没有发现任何相关信息。

          google.charts.load('current', {'packages':['table', 'controls']});
          google.charts.setOnLoadCallback(initializeClient);
    
            function initializeClient() {
              var queryString = encodeURIComponent('SELECT A, B, C, D, E, F, G, H');
              var query = new google.visualization.Query(
            'https://docs.google.com/spreadsheets/d/1VhDR4B9EjkrITkXRCcrSiJXXPD-q-ud2CQ03XE51o1o/edit?usp=sharing&headers=1&tq=' + queryString);
              query.send(drawClientDashboard);
            }
    
            function drawClientDashboard(response) {
              var data = response.getDataTable(); 
    
              // create a dashboard
              var dashboard = new google.visualization.Dashboard( document.getElementById('client-dashboard') );
    
              // categoryFilter for name
               var nameFilter = new google.visualization.ControlWrapper({
                 'controlType': 'CategoryFilter',
                 'containerId': 'client-filter',
                 'options': {
                   'filterColumnIndex': 0,
                   'ui.labelStacking':'vertical'
                 }
               });
    
              // categoryFilter for type of business
               var bizTypeFilter = new google.visualization.ControlWrapper({
                 'controlType': 'CategoryFilter',
                 'containerId': 'client-filter',
                 'options': {
                   'filterColumnIndex': 1,
                   'ui.labelStacking':'vertical'
                 }
               });
    
               // stringFilter for associated cofc
                var prefServFilter = new google.visualization.ControlWrapper({
                  'controlType': 'StringFilter',
                  'containerId': 'client-filter',
                  'options': {
                    'filterColumnIndex': 6,
                    'ui.labelStacking':'vertical'
                  }
                });
    
    
               var table = new google.visualization.ChartWrapper({
                 'chartType': 'Table',
                 'containerId': 'client-table',
                 'options': {
                   'width': '100%',
                   'height': '500px'
                 }
               });
    
               // bind my 3 controls to table
               dashboard.bind([nameFilter, bizTypeFilter, prefServFilter], table);

               dashboard.draw(data);
    
    
            }

    
<script src="https://www.gstatic.com/charts/loader.js"></script>
    
    <body>
        <div id="client-dashboard">
         <div id="client-filter"></div>
         <div id="client-table"></div>
        </div>
    </body>

0 个答案:

没有答案