将多个过滤器应用于 Google Charts Dashboards答案

【问题标题】：Applying multiple filters to Google Charts Dashboards将多个过滤器应用于 Google Charts Dashboards
【发布时间】：2020-11-05 17:05:54
【问题描述】：

我面临的问题与 Google Charts - Multiple Category Filters - Restricting options?

我的问题是：如果我必须应用三个或更多带有限制选项的类别过滤器，我该如何解决这个问题？

我的代码如下所示：

<html>
<head>
  <!--Load the AJAX API-->
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">google.load('visualization', '1', {packages: ['controls']});

   function drawVisualization() {
    // Prepare the data
    var data = google.visualization.arrayToDataTable([
        ['Country', 'Region/State', 'Color', 'Population'],
        ['USA', 'California', 'Dark Green', 700000],
        ['USA', 'California', 'Light Green', 776733],
        ['USA', 'California', 'Dark Blue', 3000000],
        ['USA', 'California', 'Light Blue', 3694820],
        ['USA', 'New York', 'Dark Green', 2000000],
        ['USA', 'New York', 'Light Green', 657592],
        ['USA', 'New York', 'Dark Blue', 8000000],
        ['USA', 'New York', 'Light Blue', 3175173],
        ['France', 'Ile-de-France', 'Dark Green', 2000000],
        ['France', 'Ile-de-France', 'Light Green', 1093031],
        ['France', 'Ile-de-France', 'Dark Blue', 100000],
        ['France', 'Ile-de-France', 'Light Blue', 51372],
        ['France', 'Provence', 'Dark Green', 800000],
        ['France', 'Provence', 'Light Green', 252395],
        ['France', 'Provence', 'Dark Blue', 300000],
        ['France', 'Provence', 'Light Blue', 73556] 
    ]);
    
    // Define category pickers for 'Country', 'Region/State' and 'City'
    var countryPicker = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'control1',
        'options': {
            'filterColumnLabel': 'Country',
            'ui': {
                'labelStacking': 'vertical',
                'allowTyping': false,
                'allowMultiple': false,
                'allowNone': false
            }
        },
        'state': {
            selectedValues: ['USA']
        }
    });
    
    var regionPicker = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'control2',
        'options': {
            'filterColumnLabel': 'Region/State',
            'ui': {
                'labelStacking': 'vertical',
                'allowTyping': false,
                'allowMultiple': false,
                'allowNone': false
            }
        },
        'state': {
            selectedValues: ['California']
        }
    });

    var colorPicker = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'control3',
        'options': {
            'filterColumnLabel': 'Color',
            'ui': {
                'labelStacking': 'vertical',
                'allowTyping': false,
                'allowMultiple': false,
                'allowNone': false
            }
        },
    });
    
    // Define a bar chart to show 'Population' data
    var barChart = new google.visualization.ChartWrapper({
        'chartType': 'BarChart',
        'containerId': 'chart1',
        'options': {
            'width': 300,
            'height': 300
        },
        'view': {
            'columns': [2, 3]
        }
    });
    
    var pieChartA = new google.visualization.ChartWrapper({
        'chartType': 'PieChart',
        'containerId': 'chart2',
        'options': {
            'width': 300,
            'height': 300
        },
        'view': {
            'columns': [2, 3]
        }
    });
    
    var pieChartB = new google.visualization.ChartWrapper({
        'chartType': 'PieChart',
        'containerId': 'chart3',                
        'options': {
            'width': 300,
            'height': 300
        },
        'view': {
            'columns': [2, 3]
        }
    });
    
    // Create the dashboard.
    var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
    dash.bind(countryPicker, regionPicker,colorPicker);
    dash.bind([regionPicker,countryPicker], [barChart, pieChartA, pieChartB]);
    //dash.bind(regionPicker, [barChart, pieChartA, pieChartB]);//also tried this didnt work out.
    dash.draw(data);
}

google.setOnLoadCallback(drawVisualization);
</script>
<body>
<div id="dashboard">
    <div id="control1"></div>
    <div id="control2"></div>
    <div id="control3"></div>   
    <div id="chart1"></div>
    <div id="chart2"></div>
    <div id="chart3"></div>
</div>
</body>
</html>

第三个过滤器没有显示在板上。不知道我该如何处理。如果还有其他类别过滤器怎么办？

【问题讨论】：

标签： charts google-visualization

【解决方案1】：

应该出现的每个过滤器都应该包含在与图表的绑定方法中。
在此处添加颜色选择器...

dash.bind([regionPicker, countryPicker, colorPicker], [barChart, pieChartA, pieChartB]);

但您需要在颜色选择器上不允许任何内容，否则只会选择一行...

allowNone: true

如果您有多个相互依赖的选择器，
依次绑定它们。但应该只有两个参数传递给 bind 方法。

如果区域选择器依赖于国家选择器，则绑定如下...

dash.bind(countryPicker, regionPicker);

如果区域选择器和颜色选择器都依赖于国家选择器，则绑定如下...

dash.bind(regionPicker, [regionPicker, colorPicker]);

如果地区选择器依赖于国家选择器，
并且颜色选择器依赖于区域选择器，使用多个绑定如下...

dash.bind(countryPicker, regionPicker);
dash.bind(regionPicker, colorPicker);

请参阅以下工作 sn-p...

google.charts.load('current', {
  packages: ['controls', 'corechart', 'table']
}).then(function() {
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Region/State', 'Color', 'Population'],
    ['USA', 'California', 'Dark Green', 700000],
    ['USA', 'California', 'Light Green', 776733],
    ['USA', 'California', 'Dark Blue', 3000000],
    ['USA', 'California', 'Light Blue', 3694820],
    ['USA', 'New York', 'Dark Green', 2000000],
    ['USA', 'New York', 'Light Green', 657592],
    ['USA', 'New York', 'Dark Blue', 8000000],
    ['USA', 'New York', 'Light Blue', 3175173],
    ['France', 'Ile-de-France', 'Dark Green', 2000000],
    ['France', 'Ile-de-France', 'Light Green', 1093031],
    ['France', 'Ile-de-France', 'Dark Blue', 100000],
    ['France', 'Ile-de-France', 'Light Blue', 51372],
    ['France', 'Provence', 'Dark Green', 800000],
    ['France', 'Provence', 'Light Green', 252395],
    ['France', 'Provence', 'Dark Blue', 300000],
    ['France', 'Provence', 'Light Blue', 73556]
  ]);

  var countryPicker = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'control1',
    options: {
      filterColumnLabel: 'Country',
      ui: {
        labelStacking: 'vertical',
        allowTyping: false,
        allowMultiple: false,
        allowNone: false
      }
    },
    state: {
      selectedValues: ['USA']
    }
  });

  var regionPicker = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'control2',
    options: {
      filterColumnLabel: 'Region/State',
      ui: {
        labelStacking: 'vertical',
        allowTyping: false,
        allowMultiple: false,
        allowNone: false
      }
    },
    state: {
      selectedValues: ['California']
    }
  });

  var colorPicker = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'control3',
    options: {
      filterColumnLabel: 'Color',
      ui: {
        labelStacking: 'vertical',
        allowTyping: false,
        allowMultiple: false,
        allowNone: true
      }
    },
  });

  // Define a bar chart to show 'Population' data
  var barChart = new google.visualization.ChartWrapper({
    chartType: 'BarChart',
    containerId: 'chart1',
    options: {
      width: 300,
      height: 300,
      hAxis: {
        viewWindow: {
          min: 0
        }
      }
    },
    view: {
      columns: [2, 3]
    }
  });

  var pieChartA = new google.visualization.ChartWrapper({
    chartType: 'PieChart',
    containerId: 'chart2',
    options: {
      width: 300,
      height: 300
    },
    view: {
      columns: [2, 3]
    }
  });

  var pieChartB = new google.visualization.ChartWrapper({
    chartType: 'PieChart',
    containerId: 'chart3',
    options: {
      width: 300,
      height: 300
    },
    view: {
      columns: [2, 3]
    }
  });

  // Create the dashboard.
  var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
  dash.bind(countryPicker, regionPicker);
  dash.bind([regionPicker, countryPicker, colorPicker], [barChart, pieChartA, pieChartB]);
  dash.draw(data);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
  <div id="control1"></div>
  <div id="control2"></div>
  <div id="control3"></div>
  <div id="chart1"></div>
  <div id="chart2"></div>
  <div id="chart3"></div>
</div>

【讨论】：