【问题标题】:Custom Checkbox Category Selector自定义复选框类别选择器
【发布时间】:2020-03-26 13:35:16
【问题描述】:

我想按不同的类别过滤我的数据数组。它正在工作,但它应该选择多个类别的行。如果选中多个复选框。如何实现此代码?

这是我的代码:

check_cells = function() {
  var values = [];
  if (document.getElementById("checkbox_pouch").checked == true) {
    values.push('pouch');
  }
  if (document.getElementById("checkbox_18650").checked == true) {
    values.push('18650');
  }
  if (document.getElementById("checkbox_21700").checked == true) {
    values.push('21700');
  }
  if (document.getElementById("checkbox_pouch").checked == false && document.getElementById("checkbox_18650").checked == false && document.getElementById("checkbox_21700").checked == false) {
    values.push('empty');
  }
  if (values.length > 0) {
    view.setRows(data.getFilteredRows([{
      column:2,
      test: function (value) {
        return (values.indexOf(value) > -1);
      }
      }]));
    }
  dashboard.draw(view, drawOptions);
  }
  else {
  view.setRows(data.getFilteredRows([{column:2}]));
  dashboard.draw(view);
  }
  }

var view = new google.visualization.DataView(data);

      var drawOptions = {
        showRowNumber: false,
        allowHtml: true,    
      };


      // Inititial Draw of the dashboard.
      dashboard.draw(view, drawOptions);

【问题讨论】:

    标签: google-visualization


    【解决方案1】:

    过滤多个值时,
    您需要将它们组合成一个过滤器设置。
    数据视图不会让您在同一列上有多个过滤器。

    在这种情况下,您可以使用test 回调函数,而不是value 键。

    这里,一个数组用于收集值,
    以及用于过滤列的test 回调...

    check_pouch = function() {
      var values = [];
      if (document.getElementById("checkbox_pouch").checked == true) {
        values.push('pouch');
      }
      if (document.getElementById("checkbox_18650").checked == true) {
        values.push('18650');
      }
      if (values.length > 0) {
        view.setRows(data.getFilteredRows([{
          column:2,
          test: function (value) {
            return (values.indexOf(value) > -1);
          }
        }]));
      }
      dashboard.draw(view);
    }
    

    【讨论】:

    • 我将复选框设置为默认选中,并显示所有数据。未选中任何框时如何显示空图表?
    • 检查this answer...
    • 我默认选中了一个复选框,在加载页面时它应该只显示这些值。但它会同时显示,直到我取消选中并再次选中该框。我使用事件侦听器(DOMContentLoaded,check_pouch)尝试了它,但控制台显示:未捕获的 ReferenceError:check_pouch 未定义。有什么建议吗?
    • 是否在第一次绘制时过滤数据表?你能用代码更新问题吗?
    猜你喜欢
    • 2023-01-31
    • 2021-10-09
    • 2016-07-31
    • 1970-01-01
    • 2013-07-18
    • 2016-01-13
    • 2020-09-07
    • 2011-09-23
    相关资源
    最近更新 更多