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

debugcn 发表于 Dev

用户3102065

这是一个可以根据类别选择器控件隐藏/显示图表的示例。我在一个类似的方法在那里我试图隐藏工作/显示来自谷歌的可视化表中的列中给出这个小提琴

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([]);       
          }
        });
      }

向往

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

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

如果我正确理解了您的意图，那么如果没有选择任何值，则要隐藏“国家”和“地区”列。为此，您需要为每个控件连接一个“ statechange”事件处理程序，并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/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。