我正在创建一个谷歌图表以部署为web应用程序，但我在类别过滤器方面遇到了一些问题。我希望能够一次选择多个项目，这样下拉列表就会一直打开，直到我完成选择项目。默认行为是，每次选择时，下拉列表都会关闭，当您从大约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>这里有一个改编自谷歌文档的基本jsfiddle。http://jsfiddle.net/xcgpabju/2/
任何帮助都将不胜感激！
没有任何选项可以更改类别过滤器的默认行为/使其在选择时保持打开。。。
也可能出现其他问题，例如具有足够的空间来显示所选择的值。
另一种选择是使用jqueryui作为筛选控件，
尽管它确实需要更多的代码。。。
有关示例，请参阅以下工作片段。
这将使用可选项来筛选图表
以下是使用可选。。。
使用鼠标单独或成组选择元素。该插件允许用鼠标在元素上拖动一个框(有时称为套索(来选择元素。还可以在按住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 </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>