Редактирование фильтра категорий Google Chart

63
5

Я создаю диаграмму google для развертывания в качестве веб-приложения, и у меня возникают некоторые проблемы с фильтром категории. Я хотел бы иметь возможность выбирать сразу несколько элементов, чтобы раскрывающийся список оставался открытым до тех пор, пока я не закончу выбор элементов. Поведение по умолчанию - это то, что при каждом выборе раскрывающийся список закрывается, что очень неудобно, когда вы выбираете 20-30 элементов из списка ~ 100.

// 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 адаптирован из документации Google. http://jsfiddle.net/xcgpabju/2/

Любая помощь будет оценена!

спросил(а) 2021-01-25T14:58:15+03:00 4 месяца, 4 недели назад
1
Решение
88

нет параметров, которые изменят поведение по умолчанию фильтра категории/заставят его оставаться открытым при выборе...

могут возникнуть и другие проблемы, такие как наличие достаточного пространства для отображения выбранных значений.

другим вариантом будет использование jquery-ui для элементов управления фильтром,
хотя для этого требуется значительно больше кода...

см. пример рабочего фрагмента.

для этого используется выборка для фильтрации диаграммы.
Ниже приведено описание использования...

Используйте мышь для выбора элементов отдельно или в группе. Плагин позволяет выбирать элементы, перетаскивая ящик (иногда называемый лассо) с помощью мыши над элементами. Элементы также могут быть выбраны щелчком или перетаскиванием, удерживая клавишу 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>

ответил(а) 2021-01-25T14:58:15+03:00 4 месяца, 4 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема