文章/答案/技术大牛

发布

社区首页 >问答首页 >通过将多个Statechange事件指向一个函数来筛选Google可视化表图

问通过将多个Statechange事件指向一个函数来筛选Google可视化表图
EN

Stack Overflow用户

提问于 2018-01-12 15:26:56

回答 1查看 986关注 0票数 2

使用巨大的帮助 @WHiteHat，我有一个运行良好的这里。它有两个过滤器，但它们独立工作。他们取消了另一个人以前的结果。您可以看到代码这里。每个过滤器都有一个监听器，并内置了函数。

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

我想让过滤器一起工作。同样，@WhiteHat在传递给.getFilteredRows之前，为将过滤器组合成数组提供了大量帮助。

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

但是，该函数不运行。我不知道原因，也不知道如何解决。

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

下面是处理侦听器和combineFilter函数的代码的一部分。这里是完整的代码。关于如何组合多个过滤器的结果有什么解决方案？

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

google-apps-script

google-visualization

javascript

charts

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-01-12 17:57:42

主要的问题是范围的确定..。

你在一个函数中声明数据，表格，过滤器，

试着用在另一个..。

变量声明需要在函数之外，

在另一个函数中使用相同的变量..。

只需将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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48229253

复制

相似问题

问通过将多个Statechange事件指向一个函数来筛选Google可视化表图
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问通过将多个Statechange事件指向一个函数来筛选Google可视化表图EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问通过将多个Statechange事件指向一个函数来筛选Google可视化表图
EN