将多个statechange事件指向同一函数，实现Google可视化表格图表筛选

Let's get those two filters working together instead of canceling each other out, and figure out why your combineFilters function isn't running. Here's what's going wrong and how to fix it:

Key Issues in Your Current Code #

1. Scope Problems: If your gradeFilter, subjectFilter, data, and table variables are defined inside a callback (like google.charts.setOnLoadCallback), your global combineFilters function can't access them. This leads to silent errors that prevent the function from executing.
2. Missing table.draw(): Your original filter listeners both called table.draw() to update the chart, but your combineFilters function skips this step—so even if it ran, the table wouldn't change.
3. Stray Syntax: There's an extra }); after your listener setup that might be wrapping your function definition in an invalid scope.

Corrected Solution #

Wrap your entire chart setup and the combineFilters function in the same scope to ensure all variables are accessible, add the missing draw call, and clean up the code for readability:

google.charts.load('current', {packages: ['table', 'controls']});
google.charts.setOnLoadCallback(initDashboard);

function initDashboard() {
  // Replace this with your actual data initialization
  var data = google.visualization.arrayToDataTable([
    // Example columns: adjust to match your data
    ['Name', ..., 'Subject', ..., 'Grade'],
    ['Student 1', ..., 'Math', ..., '9th'],
    // Add your rows here
  ]);

  // Initialize your filters (adjust config to match your setup)
  var gradeFilter = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'grade_filter_div',
    options: {
      filterColumnIndex: 12,
      ui: {labelStacking: 'vertical', allowTyping: false, allowMultiple: true}
    }
  });

  var subjectFilter = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'subject_filter_div',
    options: {
      filterColumnIndex: 10,
      ui: {labelStacking: 'vertical', allowTyping: false, allowMultiple: true}
    }
  });

  // Initialize your table chart
  var table = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'table_div',
    options: {showRowNumber: true, width: '100%', height: '100%'}
  });

  // Attach listeners to both filters, pointing to combineFilters
  google.visualization.events.addListener(gradeFilter, 'statechange', combineFilters);
  google.visualization.events.addListener(subjectFilter, 'statechange', combineFilters);

  // Optional: Bind filters to table using a dashboard (simpler setup)
  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
  dashboard.bind([gradeFilter, subjectFilter], table);
  dashboard.draw(data);

  // Define combineFilters IN THIS SCOPE so it can access all variables
  function combineFilters() {
    var selectedGrades = gradeFilter.getState().selectedValues;
    var selectedSubjects = subjectFilter.getState().selectedValues;
    var view = {columns: [0]}; // Adjust columns to match your desired display
    var filterConditions = [];

    // Add grade filter condition if any grades are selected
    if (selectedGrades.length > 0) {
      filterConditions.push({
        column: 12,
        test: function(value) {
          if (value === null) return false;
          // Use Array.some() for cleaner logic than forEach
          return selectedGrades.some(grade => value.indexOf(grade) > -1);
        }
      });
    }

    // Add subject filter condition if any subjects are selected
    if (selectedSubjects.length > 0) {
      filterConditions.push({
        column: 10,
        test: function(value) {
          if (value === null) return false;
          return selectedSubjects.some(subject => value.indexOf(subject) > -1);
        }
      });
    }

    // Apply filters: show all rows if no filters are active
    if (filterConditions.length > 0) {
      view.rows = data.getFilteredRows(filterConditions);
    } else {
      view.rows = null; // Null means show all rows
    }

    // Update and redraw the table
    table.setView(view);
    table.draw();
  }
}

Critical Fixes Explained #

• Scope Alignment: By defining combineFilters inside initDashboard, it has direct access to gradeFilter, subjectFilter, data, and table—no more "variable is undefined" errors.
• Added table.draw(): This tells the chart to update with the new filtered view, which was missing in your original function.
• Simplified Test Logic: Array.some() replaces the forEach loop to check if any selected value matches, making the code shorter and easier to debug.
• No-Filter Handling: When neither filter has selections, setting view.rows to null ensures the table shows all data instead of going empty.

Debugging Tip #

Always check your browser's developer console (F12 → Console tab) for errors. If your function wasn't running, the console would likely show "gradeFilter is not defined" or similar—this is the fastest way to spot scope issues.

内容的提问来源于stack exchange，提问作者Jerry Williamson