Charts 将多个筛选器应用于Google图表仪表板_Charts_Google Visualization

Charts 将多个筛选器应用于Google图表仪表板

charts google-visualization

Charts 将多个筛选器应用于Google图表仪表板,charts,google-visualization,Charts,Google Visualization,我面临的问题和你的完全一样我的问题是：如果我必须应用三个或更多带有限制选项的类别过滤器，我该如何解决这个问题我的代码如下所示： <html> <head>  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

我面临的问题和你的完全一样

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

我的代码如下所示：

<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>

第三个过滤器没有显示在电路板上。我不知道该怎么办。另外，如果还有其他类别筛选器，该怎么办？

应该出现的每个筛选器都应该包含在带有图表的bind方法中。在这里添加颜色选择器

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);

如果区域选择器和颜色选择器都依赖于国家/地区选择器，请按以下方式绑定

dash.bind(countryPicker, regionPicker);

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

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

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

dash.bind(countryPicker, regionPicker);

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

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

请参阅以下工作片段

google.charts.load'current'{ 包：['controls'，'corechart'，'table'] }.Then函数{ var data=google.visualization.arrayToDataTable[ [“国家”、“地区/州”、“肤色”、“人口”]， [‘美国’、‘加利福尼亚’、‘深绿色’，700000]， ['USA'，'California'，'Light Green'，776733]， [‘美国’、‘加利福尼亚’、‘深蓝色’、3000000]， ['USA'，'California'，'Light Blue'，3694820]， [‘美国’、‘纽约’、‘深绿色’，2000000]， [“美国”，“纽约”，“浅绿色”，657592]， [‘美国’、‘纽约’、‘深蓝色’、8000000]， [‘美国’、‘纽约’、‘浅蓝色’、3175173]， [“法国”、“法兰西岛”、“深绿色”，2000000]， ['France'，'Ile de France'，'Light Green'，1093031]， [“法国”、“法兰西岛”、“深蓝色”，100000]， ['France'，'Ile de France'，'Light Blue'，51372]， [‘法国’、‘普罗旺斯’、‘深绿色’，800000]， [‘法国’、‘普罗旺斯’、‘浅绿色’，252395]， [‘法国’、‘普罗旺斯’、‘深蓝色’、300000]， [‘法国’、‘普罗旺斯’、‘浅蓝色’，73556] ]; var countryPicker=new google.visualization.ControlWrapper{ controlType:“CategoryFilter”，集装箱：“control1”，选项：{ filterColumnLabel:'国家'，用户界面：{ 标签定位：“垂直”， allowTyping:false， allowMultiple:false， allowNone:错 } }, 声明：{ 所选值：[“美国”] } }; var regionPicker=new google.visualization.ControlWrapper{ controlType:“CategoryFilter”，集装箱：“control2”，选项：{ filterColumnLabel:'地区/州'，用户界面：{ 标签定位：“垂直”， allowTyping:false， allowMultiple:false， allowNone:错 } }, 声明：{ selectedValues:['California'] } }; var colorPicker=new google.visualization.ControlWrapper{ controlType:“CategoryFilter”，集装箱：“control3”，选项：{ filterColumnLabel:“颜色”，用户界面：{ 标签定位：“垂直”， allowTyping:false， allowMultiple:false，阿隆：是的 } }, }; //定义条形图以显示“人口”数据 var barChart=new google.visualization.ChartWrapper{ chartType:'条形图'，集装箱运输：“chart1”，选项：{ 宽度：300，身高：300，哈克斯：{ 视图窗口：{ 最低：0 } } }, 视图：{ 栏目：[2,3] } }; var pieChartA=new google.visualization.ChartWrapper{ 图表类型：'PieChart'，集装箱运输：“chart2”，选项：{ 宽度：300，身高：300 }, 视图：{ 栏目：[2,3] } }; var pieChartB=新的google.visualization.ChartWrapper{ 图表类型：'PieChart'，集装箱运输：“chart3”，选项：{ 宽度：300，身高：300 }, 视图：{ 栏目：[2,3] } }; //创建仪表板。 var dash=new google.visualization.Dashboarddocument.getElementById'dashboard'； dash.bindcountryPicker、regionPicker； dash.bind[regionPicker，countryPicker，colorPicker]，[barChart，pieChartA，pieChartB]； dash.drawdata； };

应该出现的每个过滤器都应该包含在带有图表的bind方法中。在这里添加颜色选择器

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);

如果区域选择器和颜色选择器都依赖于国家/地区选择器，请按以下方式绑定

dash.bind(countryPicker, regionPicker);

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

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

如果区域选择器依赖于国家/地区选择器，并且颜色选择器依赖于区域选择器，使用多个下面是一个例子

dash.bind(countryPicker, regionPicker);

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

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

请参阅以下工作片段