谷歌图表：过滤 GeoChart答案

【问题标题】：Google chart : filter GeoChart谷歌图表：过滤 GeoChart
【发布时间】：2016-06-09 23:48:33
【问题描述】：

我正在尝试使用 ControlWrapper 过滤数据以显示在仪表板内的 GeoChart 上。问题如下：我必须有三列：“国家”、“价值”和“季度”。现在，我只想显示四分之一的信息，这要归功于 CategoryPicker。然后，使用仪表板功能，我想将我的选择器与我的 GeoChart 绑定。但是，我无法显示我的 GeoChart，因为它会引发错误，因为我使用了三列，而我应该只有两列...

我知道诀窍是使用 DataView 并隐藏第三列，但是我无法链接我的过滤器和我的 geochart。

这里有解决方法吗？我的部分代码可以在下面找到。顺便说一句，这适用于其他类型的图表，但不适用于 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);

【问题讨论】：

标签： javascript google-visualization

【解决方案1】：

首先，chartView 是ChartRangeFilter 上的ui 的一部分——不是CategoryFilter

此外，view: {'columns':[0,1]} 不应该是 options 的一部分
但与options、chartType 和containerId 处于同一级别

但是，这里都不需要...

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>

【讨论】：