javascript - 通过将多个状态变化事件指向一个函数来过滤 Google 可视化表格图表

Question

与 tremendous help from @WHiteHat，我有一个谷歌可视化图表 here效果很好。它有两个过滤器，但它们独立工作。他们取消了对方之前的结果。可以看到代码here .每个过滤器都有一个监听器和内置函数。

//listen for changes in grade level filter
google.visualization.events.addListener(gradeFilter, 'statechange', function () {
var state = gradeFilter.getState().selectedValues;
var view = {columns: [0]};
if (state.length > 0) {
view.rows = data.getFilteredRows([{
  column: 12,
  test: function (value) {
    var found = false;
    if (value !== null) {
      state.forEach(function (selected) {
        if (value.indexOf(selected) > -1) {
          found = true;}});}
    return found;
  }}]);}
 table.setView(view);
 table.draw();});

//listen for changes in grade level filter
google.visualization.events.addListener(subjectFilter, 'statechange', function () {
var state = subjectFilter.getState().selectedValues;
var view = {columns: [0]};
if (state.length > 0) {
view.rows = data.getFilteredRows([{
  column: 10,
  test: function (value) {
    var found = false;
    if (value !== null) {
      state.forEach(function (selected) {
        if (value.indexOf(selected) > -1) {
          found = true;}});}
    return found;
  }}]);}
 table.setView(view);
 table.draw();});

我希望过滤器可以结合使用。同样，在传递给 .getFilteredRows 之前，@WhiteHat 在将过滤器组合成数组方面提供了大量帮助。

现在我需要将两个过滤器指向一个单独的函数。那就是我被困的地方。我为每个指向名为“combineFilters”的函数的过滤器添加了一个监听器。

但是，该函数没有运行。我不确定原因或如何解决它。

我似乎找不到在事件监听器中调用外部函数的示例。

下面是处理监听器和 combineFilter 函数的代码部分。 Here是完整的代码。关于如何组合多个过滤器的结果的任何解决方案？

google.visualization.events.addListener(gradeFilter, 'statechange', combineFilters);
google.visualization.events.addListener(subjectFilter, 'statechange', combineFilters);
});

function combineFilters(){

var stateGrade = gradeFilter.getState().selectedValues;
var stateSubject = subjectFilter.getState().selectedValues;
var view = {
columns: [0]
};
var viewFilters = [];
if (stateGrade.length > 0) {
viewFilters.push({
column: 12,
test: function (value) {
  var found = false;
  if (value !== null) {
    stateGrade.forEach(function (selected) {
      if (value.indexOf(selected) > -1) {
        found = true;
      }
    });
  }
  return found;
  }
  });
  }
  if (stateSubject.length > 0) {
  viewFilters.push({
column: 10,
test: function (value) {
  var found = false;
  if (value !== null) {
    stateSubject.forEach(function (selected) {
      if (value.indexOf(selected) > -1) {
        found = true;
      }
    });
  }
  return found;
}
});
}
view.rows = data.getFilteredRows(viewFilters);
table.setView(view);
}

Answer 1

主要问题是由于范围界定...

你在一个函数中声明了数据、表格、过滤器，
并尝试在另一个中使用它们......

变量声明需要在函数之外，
在另一个函数中使用相同的变量...

只需将 var 语句移出，
并从函数中删除 var 部分，
见下文……

另一个问题是过滤器选项被清除时，
仅在过滤器存在时设置 view.rows...

请参阅以下工作片段...

// MOVE declarations here
var data;
var table;
var gradeFilter;
var subjectFilter;

google.charts.load('current', {packages:['controls', 'corechart', 'table']}).then(function () {
  var sheet = 'https://docs.google.com/spreadsheets/d/1DOTezFuzpH8wzeh25Cgv9e9q577zd_HN1TiIxVQzbUQ/edit#gid=0';

  // REMOVE var here    
  table = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'chart-table',
    options: {allowHtml: true}});

  gradeFilter = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'filter-grade',
    options: {filterColumnIndex: 12,matchType: 'any',allowTyping: true,
      ui: {labelStacking: 'horizontal',label: '',caption: 'Filter by Grade Level(s)',selectedValuesLayout: 'below',sortValues: false }}});

  subjectFilter = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'filter-subject',
    options: {filterColumnIndex: 10,matchType: 'any',allowTyping: true,
      ui: {labelStacking: 'horizontal',label: '',caption: 'Filter by Subject Area(s)',selectedValuesLayout: 'below',sortValues: false }}});

  //query sheet for grade levels
  new google.visualization.Query(sheet).send(function (response) {
    data = response.getDataTable();
    var gradeAnswers = data.getDistinctValues(12);
    var gradeChoices = [];
    gradeAnswers.forEach(function (answer) {
      if (answer !== null) {
        var choices = answer.split(',');
        choices.forEach(function (choice) {
          choice = choice.trim();
          if (gradeChoices.indexOf(choice) === -1) {
            gradeChoices.push(choice);}
        }); } });
    gradeChoices.sort();

    //query sheet for subject areas
    var subjectAnswers = data.getDistinctValues(10);
    var subjectChoices = [];
    subjectAnswers.forEach(function (subjectAnswer) {
      if (subjectAnswer !== null) {
        var subjectAreaChoices = subjectAnswer.split(',');
        subjectAreaChoices.forEach(function (subjectAreaChoice) {
          subjectAreaChoice = subjectAreaChoice.trim();
          if (subjectChoices.indexOf(subjectAreaChoice) === -1) {
            subjectChoices.push(subjectAreaChoice);}
        }); } });
    subjectChoices.sort();

    gradeFilter.setDataTable(data);
    gradeFilter.setOption('values', gradeChoices);
    gradeFilter.draw();

    subjectFilter.setDataTable(data);
    subjectFilter.setOption('values', subjectChoices);
    subjectFilter.draw();

    table.setView({columns: [0]});
    table.setDataTable(data);
    table.draw();

   });
   google.visualization.events.addListener(gradeFilter, 'statechange', combineFilters);
   google.visualization.events.addListener(subjectFilter, 'statechange', combineFilters);
});

function combineFilters(){
  var stateGrade = gradeFilter.getState().selectedValues;
  var stateSubject = subjectFilter.getState().selectedValues;
  var view = {
    columns: [0]
  };
  table.setView(view);
  var viewFilters = [];
  if (stateGrade.length > 0) {
    viewFilters.push({
      column: 12,
      test: function (value) {
        var found = false;
        if (value !== null) {
          stateGrade.forEach(function (selected) {
            if (value.indexOf(selected) > -1) {
              found = true;
            }
          });
        }
        return found;
      }
    });
  }
  if (stateSubject.length > 0) {
    viewFilters.push({
      column: 10,
      test: function (value) {
        var found = false;
        if (value !== null) {
          stateSubject.forEach(function (selected) {
            if (value.indexOf(selected) > -1) {
              found = true;
            }
          });
        }
        return found;
      }
    });
  }
  if (viewFilters.length > 0) {
    view.rows = data.getFilteredRows(viewFilters);
    table.setView(view);
  }
  table.draw();
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="filter-grade"></div>
<div id="filter-subject"></div>
<div id="chart-table"></div>

编辑——添加字符串过滤器

var data;
var table;
var gradeFilter;
var subjectFilter;
var stringFilter;

google.charts.load('current', {packages:['controls', 'corechart', 'table']}).then(function () {
  var sheet = 'https://docs.google.com/spreadsheets/d/1DOTezFuzpH8wzeh25Cgv9e9q577zd_HN1TiIxVQzbUQ/edit#gid=0';

  table = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'chart-table',
    options: {allowHtml: true}});

  gradeFilter = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'filter-grade',
    options: {filterColumnIndex: 12,matchType: 'any',allowTyping: true,
      ui: {labelStacking: 'horizontal',label: '',caption: 'Filter by Grade Level(s)',selectedValuesLayout: 'below',sortValues: false }}});

  subjectFilter = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'filter-subject',
    options: {filterColumnIndex: 10,matchType: 'any',allowTyping: true,
      ui: {labelStacking: 'horizontal',label: '',caption: 'Filter by Subject Area(s)',selectedValuesLayout: 'below',sortValues: false }}});

  stringFilter = new google.visualization.ControlWrapper({
    controlType: 'StringFilter',
    containerId: 'filter-title',
    options: {
      filterColumnIndex: 1,
      ui: {
        caption: 'Filter by Title'
      }
    }
  });

  //query sheet for grade levels
  new google.visualization.Query(sheet).send(function (response) {
    data = response.getDataTable();
    var gradeAnswers = data.getDistinctValues(12);
    var gradeChoices = [];
    gradeAnswers.forEach(function (answer) {
      if (answer !== null) {
        var choices = answer.split(',');
        choices.forEach(function (choice) {
          choice = choice.trim();
          if (gradeChoices.indexOf(choice) === -1) {
            gradeChoices.push(choice);}
        }); } });
    gradeChoices.sort();

    //query sheet for subject areas
    var subjectAnswers = data.getDistinctValues(10);
    var subjectChoices = [];
    subjectAnswers.forEach(function (subjectAnswer) {
      if (subjectAnswer !== null) {
        var subjectAreaChoices = subjectAnswer.split(',');
        subjectAreaChoices.forEach(function (subjectAreaChoice) {
          subjectAreaChoice = subjectAreaChoice.trim();
          if (subjectChoices.indexOf(subjectAreaChoice) === -1) {
            subjectChoices.push(subjectAreaChoice);}
        }); } });
    subjectChoices.sort();

    stringFilter.setDataTable(data);
    stringFilter.draw();

    gradeFilter.setDataTable(data);
    gradeFilter.setOption('values', gradeChoices);
    gradeFilter.draw();

    subjectFilter.setDataTable(data);
    subjectFilter.setOption('values', subjectChoices);
    subjectFilter.draw();

    table.setView({columns: [0]});
    table.setDataTable(data);
    table.draw();

   });
   google.visualization.events.addListener(stringFilter, 'statechange', combineFilters);
   google.visualization.events.addListener(gradeFilter, 'statechange', combineFilters);
   google.visualization.events.addListener(subjectFilter, 'statechange', combineFilters);
});

function combineFilters(){
  var stateGrade = gradeFilter.getState().selectedValues;
  var stateSubject = subjectFilter.getState().selectedValues;
  var view = {
    columns: [0]
  };
  table.setView(view);
  var viewFilters = [];

  var stateString = stringFilter.getState().value;
  if (stateString !== '') {
    // partial match -- NOT case sensitive
    viewFilters.push({
      column: 1,
      test: function (value) {
        return (value.toLowerCase().indexOf(stateString.toLowerCase()) > -1);
      }
    });

/*
    // partial match -- case sensitive
    viewFilters.push({
      column: 1,
      test: function (value) {
        return (value.indexOf(stateString) > -1);
      }
    });

    // exact match -- case sensitive
    viewFilters.push({
      column: 1,
      value: stateString
    });

    // exact match -- NOT case sensitive
    viewFilters.push({
      column: 1,
      test: function (value) {
        return (value.toLowerCase() === stateString.toLowerCase());
      }
    });
*/
  }

  if (stateGrade.length > 0) {
    viewFilters.push({
      column: 12,
      test: function (value) {
        var found = false;
        if (value !== null) {
          stateGrade.forEach(function (selected) {
            if (value.indexOf(selected) > -1) {
              found = true;
            }
          });
        }
        return found;
      }
    });
  }
  if (stateSubject.length > 0) {
    viewFilters.push({
      column: 10,
      test: function (value) {
        var found = false;
        if (value !== null) {
          stateSubject.forEach(function (selected) {
            if (value.indexOf(selected) > -1) {
              found = true;
            }
          });
        }
        return found;
      }
    });
  }
  if (viewFilters.length > 0) {
    view.rows = data.getFilteredRows(viewFilters);
    table.setView(view);
  }
  table.draw();
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="filter-title"></div>
<div id="filter-grade"></div>
<div id="filter-subject"></div>
<div id="chart-table"></div>