Question

我正在创建要作为网络应用程序部署的google图表，并且类别过滤器遇到了一些麻烦。我希望能够一次选择多个项目，这样下拉菜单将保持打开状态，直到我完成选择项目为止。默认行为是每次选择都会关闭下拉列表，当您从〜100的列表中选择20-30个项目时，这非常不便。

// Load the Visualization API and the controls package.
google.charts.load('current', {
  'packages': ['corechart', 'controls']
});

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawDashboard);

// Callback that creates and populates a data table,
// instantiates a dashboard, a range slider and a pie chart,
// passes in the data and draws it.
function drawDashboard() {

  // Create our data table.
  var data = google.visualization.arrayToDataTable([
    ['Name', 'Donuts eaten'],
    ['Michael', 5],
    ['Elisa', 7],
    ['Robert', 3],
    ['John', 2],
    ['Jessica', 6],
    ['Aaron', 1],
    ['Margareth', 8]
  ]);

  // Create a dashboard.
  var dashboard = new google.visualization.Dashboard(
    document.getElementById('dashboard_div'));

  // Create a range slider, passing some options
  var nameSelect = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'filter_div',
    'options': {
      'filterColumnLabel': 'Name'
    }
  });

  // Create a pie chart, passing some options
  var pieChart = new google.visualization.ChartWrapper({
    'chartType': 'PieChart',
    'containerId': 'chart_div',
    'options': {
      'width': 300,
      'height': 300,
      'pieSliceText': 'value',
      'legend': 'right'
    }
  });


  dashboard.bind(nameSelect, pieChart);

  // Draw the dashboard.
  dashboard.draw(data);
}

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

  </head>

  <body>
    <!--Div that will hold the dashboard-->
    <div id="dashboard_div">
      <!--Divs that will hold each control and chart-->
      <div id="filter_div"></div>
      <div id="chart_div"></div>
    </div>
  </body>
</html>

这是从Google文档改编而成的基本jsfiddle。 http://jsfiddle.net/xcgpabju/2/

任何帮助将不胜感激！

Answer 1

没有任何选项可以更改类别过滤器的默认行为/在选择...时使其保持打开状态

也会出现其他问题，例如具有足够的空间来显示所选值。

另一种选择是将jquery-ui用于过滤器控件，
尽管确实需要更多的代码...

有关示例，请参见以下工作片段。

这使用selectable来过滤图表。
以下是使用可选...

的说明

使用鼠标单独或成组选择元素。该插件允许使用鼠标在元素上拖动一个框（有时称为套索）来选择元素。在按住ctrl / meta键的同时，也可以通过单击或拖动来选择元素，从而可以进行多个（非连续）选择。

使用方法-> getDistinctValues

从数据表中提取过滤器值

google.charts.load('current', {
  packages: ['corechart', 'controls']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Name', 'Donuts eaten'],
    ['Michael', 5],
    ['Elisa', 7],
    ['Robert', 3],
    ['John', 2],
    ['Jessica', 6],
    ['Aaron', 1],
    ['Margareth', 8]
  ]);


  var pieChart = new google.visualization.ChartWrapper({
    chartType: 'PieChart',
    containerId: 'chart_div',
    dataTable: data,
    options: {
      chartArea: {
        width: '100%',
        height: '100%'
      },
      width: 300,
      height: 300,
      pieSliceText: 'value',
      legend: 'right'
    }
  });

  google.visualization.events.addOneTimeListener(pieChart, 'ready', function () {
    var filterValues = data.getDistinctValues(0);
    $.each(filterValues, function(index, value) {
      $('.selectable').append('<li>' + value + '</li>');
    });
    $('.accordion').accordion({
      active: false,
      create: function () {
        $('.selectable').selectable({
          filter: '*',
          stop: filterChart
        });
      },
      collapsible: true,
      heightStyle: 'content'
    });

    $('.button-reset').button();
    $('.button-reset').button('disable');
    $('.button-reset').on('click', clearFilter);
  });

  function filterChart() {
    var chartView = {};
    var selectedValues = [];
    $('.selectable li.ui-selected').each(function(index, selected) {
      selectedValues.push(selected.innerHTML);
    });

    if (selectedValues.length > 0) {
      $('.selectable').closest('.accordion').find('.button-reset').button('enable');
      chartView.rows = data.getFilteredRows([{
        column: 0,
        test: function (value) {
          return (selectedValues.indexOf(value) > -1);
        }
      }]);
    }

    pieChart.setView(chartView);
    pieChart.draw();
  }

  function clearFilter(sender) {
    var accordion;

    sender.preventDefault();
    sender.stopPropagation();

    accordion = $(sender.target).closest('.accordion');
    accordion.find('.selectable li').removeClass('ui-selected');
    accordion.accordion('option', 'active', false);
    $(sender.target).closest('button').button('disable');
    filterChart();

    return false;
  }

  pieChart.draw();
});

.accordion > div.ui-accordion-content {
  padding: 6px 6px 6px 6px;
}

.dashboard {
  padding: 12px;
  white-space: nowrap;
}

.dashboard > div {
  display: inline-block;
  padding: 12px;
  vertical-align: top;
}

.selectable {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.selectable li {
  background-color: #f6f6f6;
  border: 1px solid #c5c5c5;
  cursor: pointer;
  font-size: 8pt;
  margin-top: 2px;
  padding: 6px 8px 6px 8px;
}

.selectable .ui-selecting {
  background-color: #99ccff;
	border: 1px solid #809fff;
}

.selectable .ui-selected {
  background-color: #007fff;
	border: 1px solid #003eff;
  color: #ffffff;
}

.ui-button-icon-only {
  float: right;
  height: 18px;
  margin: 0px;
  min-width: 18px;
  width: 18px;
  z-index: 1;
}

.ui-widget {
  font-size: 8pt;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"/>

<div class="dashboard">
  <div class="accordion">
    <h3>
      <span>Name&nbsp;</span>
      <button class="button-reset ui-button ui-widget ui-corner-all ui-button-icon-only" title="Clear filter...">
        <span class="ui-icon ui-icon-close"></span>
      </button>
    </h3>
    <div><ul class="selectable"></ul></div>
  </div>
  <div id="chart_div"></div>
</div>

编辑Google图表类别过滤器

1 个答案: