Question

这是example，其中图表可以根据类别选择器控件隐藏/显示。我正在尝试一种类似的方法，我试图隐藏/显示this fiddle中提供的Google可视化表格中的列

google.visualization.events.addListener(dashboard, 'ready', function() {
          var countrySelectedValues = countryPicker.getState()['selectedValues'];
          var regionSelectedValues = regionPicker.getState()['selectedValues'];          
          if (countrySelectedValues.length == 0 || regionSelectedValues.length == 0) {
            document.getElementById('chart2').hideColumns([1]);
          } else {
            document.getElementById('chart2').hideColumns([]);       
          }
        });
      }

Answer 1

DOM元素没有hideColumns方法，这就是您收到这些错误消息的原因。这是无效的：

document.getElementById('chart2').hideColumns([1]);

如果我理解你的意图，你想要隐藏＆＃34;国家＆＃34;和＆＃34;地区＆＃34;如果没有选择值，则为列。要做到这一点，你需要勾结一个状态变化＆＃34;每个控件的事件处理程序，并根据控件的状态适当地设置表view，然后重绘表：

function drawVisualization() {
    // Prepare the data
    var data = google.visualization.arrayToDataTable([
        ['Country', 'Region/State', 'City', 'Population'],
        ['USA', 'California', 'San Francisco', 776733],
        ['USA', 'California', 'Los Angeles', 3694820],
        ['USA', 'California', 'Mountain View', 70708],
        ['USA', 'New York', 'New York', 8175173],
        ['USA', 'New York', 'Albany', 857592],
        ['France', 'Ile-de-France', 'Paris', 2193031],
        ['France', 'Ile-de-France', 'Orly', 21372],
        ['France', 'Provence', 'Marseille', 852395],
        ['France', 'Provence', 'Nice', 348556]
    ]); 

    // Define category pickers for 'Country', 'Region/State'
    var countryPicker = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'control1',
        'options': {
            'filterColumnLabel': 'Country',
            'ui': {
                'labelStacking': 'vertical',
                'allowTyping': false,
                'allowMultiple': false    
            }
        }
    });

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

    // Define a bar chart to show 'Population' data.
    // The bar chart will show _only_ if the user has choosen a value

    // Define a table.
    // The table shows whatever is selected by the category pickers. It's here
    // just for reference and debugging.
    var table = new google.visualization.ChartWrapper({
        'chartType': 'Table',
        'containerId': 'chart2',
        'options': {
            'width': '300px'
        }
    });

    // Create the dashboard.
    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));

    function showHideColumns () {
        var selectedCountries = countryPicker.getState().selectedValues;
        var selectedRegions = regionPicker.getState().selectedValues;
        var columns = [2, 3];
        if (selectedRegions.length) {
            columns.splice(0, 0, 1);
        }
        if (selectedCountries.length) {
            columns.splice(0, 0, 0);
        }
        table.setView({columns: columns});
        table.draw();
    }
    google.visualization.events.addOneTimeListener(dashboard, 'ready', showHideColumns);
    google.visualization.events.addListener(countryPicker, 'statechange', showHideColumns);
    google.visualization.events.addListener(regionPicker, 'statechange', showHideColumns);

    // Configure the controls so that:
    // - the 'Country' selection drives the 'Region' one,
    // - both the 'Country' and 'Region' selection drive the barchart
    // - both the 'Country' and 'Region' selection drive the table
    dashboard.bind([countryPicker], [regionPicker]);
    dashboard.bind([regionPicker], [table]);
    // Draw the dashboard
    dashboard.draw(data);
}

google.setOnLoadCallback(drawVisualization);
google.load('visualization', '1.0', {packages: ['controls']});

此处示例：http://jsfiddle.net/asgallant/x3JT4/1/

根据类别选择器控件切换Google可视化表中的列可见性

1 个答案: