谷歌圖表：篩選器GeoChart

我想要使用ControlWrapper來過濾要顯示在儀表板內GeoChart上的數據。問題如下：我必須有三列：'國家'，'價值'和'季度'。現在，我只想顯示一個季度的信息，我可以選擇感謝CategoryPicker。然後，使用儀表板功能，我想將我的選取器與我的GeoChart綁定。然而，我不能顯示我的GeoChart，因爲它會拋出一個錯誤，因爲我使用三列，我應該只有兩個...谷歌圖表：篩選器GeoChart

我知道的訣竅是使用DataView並隱藏第三列，但然後我無法鏈接我的過濾器和我的地理位置。

這裏有解決方法嗎？我的部分代碼可以在下面找到。順便說一句，這適用於其他類型的圖表，但不與GeoChart ...爲什麼？

提前，非常感謝您的幫助！

var data = response.getDataTable(); 

     var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')); 

     var quarterSelector = new google.visualization.ControlWrapper({ 
       'controlType': 'CategoryFilter', 
       'containerId': 'filter_div', 
       'options': { 
        'filterColumnLabel': 'Quarter', 
        ui: { 
         allowTyping: false, 
         allowMultiple: false, 
         allowNone: false 
        }, 
        'chartView': { 
         'columns': [0,1] 
        }, 
       } 
     }); 

     var mapChart = new google.visualization.ChartWrapper({ 
      'chartType': 'GeoChart', 
      'containerId': 'regions_div', 
      'options': { 
       'displayMode': 'regions', 
       'region': '150', 
       'view': {'columns':[0,1]} 
      } 
     });   

    dashboard.bind(quarterSelector, mapChart);  
    dashboard.draw(data);

來源

2016-02-26 Averm

第一，chartView是ui上ChartRangeFilter的一部分 - containerId

的 options
但在同一水平 options， chartType不 CategoryFilter

此外，view: {'columns':[0,1]}不應該是一部分，

但是，在這裏不應該需要...

google.charts.load('current', { 
 
    packages: ['controls', 'geochart'], 
 
    callback: drawChart 
 
}); 
 

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Country', 'Popularity', 'Quarter'], 
 
    ['Germany', 200, 1], 
 
    ['United States', 300, 2], 
 
    ['Brazil', 400, 3], 
 
    ['Canada', 500, 4], 
 
    ['France', 600, 3], 
 
    ['RU', 700, 2] 
 
    ]); 
 

 
    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')); 
 

 
    var quarterSelector = new google.visualization.ControlWrapper({ 
 
    controlType: 'CategoryFilter', 
 
    containerId: 'filter_div', 
 
    options: { 
 
     filterColumnLabel: 'Quarter', 
 
     ui: { 
 
     allowTyping: false, 
 
     allowMultiple: false, 
 
     allowNone: false 
 
     } 
 
    } 
 
    }); 
 

 

 
    var mapChart = new google.visualization.ChartWrapper({ 
 
    chartType: 'GeoChart', 
 
    containerId: 'regions_div', 
 
    options: { 
 
     displayMode: 'regions' 
 
    } 
 
    }); 
 

 
    dashboard.bind(quarterSelector, mapChart); 
 
    dashboard.draw(data); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<script src="https://www.google.com/jsapi"></script> 
 
<div id="dashboard_div"> 
 
    <div id="filter_div"></div> 
 
    <div id="regions_div"></div> 
 
</div>

來源

2016-02-26 18:21:40 WhiteHat

谷歌圖表：篩選器GeoChart

回答

相關問題