javascript - 谷歌图表控件 - 最小和最大输入字段而不是滑块
问题描述
到目前为止我的代码:
HTML:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="programmatic_dashboard_div" style="border: 1px solid #ccc">
<table class="columns">
<tr>
<td>
<div id="programmatic_control_div" style="padding-left: 2em; min-width: 250px"></div>
<div>
</div>
</td>
<td>
<div id="programmatic_chart_div"></div>
</td>
</tr>
</table>
</div>
JS:
google.charts.load('current', {'packages':['corechart', 'controls']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var dashboard = new google.visualization.Dashboard(
document.getElementById('programmatic_dashboard_div'));
var programmaticSlider = new google.visualization.ControlWrapper({
'controlType': 'DateRangeFilter',
'containerId': 'programmatic_control_div',
'options': {
'filterColumnLabel': 'Date',
'ui': {'labelStacking': 'vertical'}
}
});
var programmaticChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'programmatic_chart_div',
'options': {
'width': 300,
'height': 300,
'legend': 'none',
'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0}
}
});
var data = google.visualization.arrayToDataTable([
['Date', 'Views', 'Unique visitors', 'Returning visitors'],
[new Date(2020, 8, 5), 4, 2, 1],
[new Date(2020, 6, 4), 10, 6, 4],
[new Date(2020, 12, 4), 12, 5, 3],
[new Date(2020, 10, 4), 5, 1, 0]
]);
dashboard.bind(programmaticSlider, programmaticChart);
dashboard.draw(data);
}
JSFiddle:https
://jsfiddle.net/4htb6j7m/
主要受 google api 启发。https://developers.google.com/chart/interactive/docs/gallery/controls
我的问题是:是否可以用两个输入框替换滑块(或者在这种情况下是日期)的图表?programmaticSlider
解决方案
google的数据表有方法-->getColumnRange(columnIndex)
这将返回一个具有列的最小值和最大值的对象。
从数据中获取最小和最大日期->getColumnRange(0)
返回...
{
min: new Date(2020, 6, 4),
max: new Date(2020, 12, 4)
}
注意:在 javascript 中使用上述日期构造函数时,
月份数字是从零开始的。(Jan = 0, Dec = 11)
这样 --> new Date(2020, 12, 4)
=1/4/2021
因为月份设置为12
,所以日期构造函数会自动提前 1 个月。
运行以下代码段...
console.log(new Date(2020, 12, 4));
我最近将 Jquery UI 日期选择器与 Jquery UI 滑块结合使用,
以类似的方式过滤图表。
有关解决方案的示例,请参见以下代码段...
google.charts.load('current', {
packages: ['corechart', 'controls']
}).then(function () {
var programmaticChart = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'programmatic_chart_div',
options: {
legend: 'none',
chartArea: {
left: 24,
top: 24,
right: 16,
bottom: 24,
height: '100%',
width: '100%'
},
height: '100%',
width: '100%'
}
});
var data = google.visualization.arrayToDataTable([
['Date', 'Views', 'Unique visitors', 'Returning visitors'],
[new Date(2020, 8, 5), 4, 2, 1],
[new Date(2020, 6, 4), 10, 6, 4],
[new Date(2020, 12, 4), 12, 5, 3],
[new Date(2020, 10, 4), 5, 1, 0],
]);
// get min & max dates
var dateRange = data.getColumnRange(0);
var formatDate = new google.visualization.DateFormat({
pattern: 'MM/dd/yyyy'
});
// create jquery slider
$('.slider').slider({
create: function (sender) {
// set label and field values
$('.slider-label').each(function (index, label) {
$(label).html(formatDate.formatValue(dateRange[$(label).data('handle')]));
});
$('.field-date').each(function (index, field) {
$(field).val(formatDate.formatValue(dateRange[$(field).data('handle')]));
});
// create min and max date pickers
$('.field-date').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'mm/dd/yy',
minDate: dateRange.min,
maxDate: dateRange.max,
onSelect: setDates,
selectOtherMonths: true,
showOtherMonths: true
}).on('change', setDates);
// draw chart
drawChart();
},
min: dateRange.min.getTime(),
max: dateRange.max.getTime(),
range: true,
slide: function(sender, ui) {
// set date picker values, min and max dates
$('.field-date[data-handle="min"]').datepicker('setDate', new Date(ui.values[0]));
$('.field-date[data-handle="min"]').datepicker('option', 'maxDate', new Date(ui.values[1]));
$('.field-date[data-handle="max"]').datepicker('setDate', new Date(ui.values[1]));
$('.field-date[data-handle="max"]').datepicker('option', 'minDate', new Date(ui.values[0]));
$('.field-date').datepicker('refresh');
},
step: 1,
stop: drawChart,
values: [dateRange.min.getTime(), dateRange.max.getTime()]
});
function setDates() {
// get date values
var minValue = $('.field-date[data-handle="min"]').datepicker('getDate');
var maxValue = $('.field-date[data-handle="max"]').datepicker('getDate');
// set slider values
$('.slider').slider('option', 'values', [minValue.getTime(), maxValue.getTime()]);
drawChart();
}
function drawChart() {
// set visible rows
var sliderValues = $('.slider').slider('option', 'values');
var view = new google.visualization.DataView(data);
view.setRows(data.getFilteredRows([{
column: 0,
minValue: new Date(sliderValues[0]),
maxValue: new Date(sliderValues[1])
}]));
programmaticChart.setDataTable(view);
programmaticChart.draw();
}
});
table {
width: 100%;
}
table .ui-datepicker {
z-index: 100;
}
table .ui-slider .ui-slider-handle {
z-index: 1;
}
table .ui-slider .ui-slider-range {
z-index: 0;
}
td {
padding: 8px;
text-align: center;
}
.cell-dashboard {
width: 50%;
}
.cell-slider {
width: 100%;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<table>
<tr>
<td class="cell-dashboard">
<table>
<tr>
<td>
<label for="filter-date">Date:</label>
<input class="field-date" id="filter-date" name="filter-date-min" maxlength="10" size="10" type="text" data-handle="min" />
<span>–</span>
<input class="field-date" name="filter-date-max" maxlength="10" size="10" type="text" data-handle="max" />
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<label class="slider-label" data-handle="min"></div>
</td>
<td class="cell-slider">
<div class="slider"></div>
</td>
<td>
<label class="slider-label" data-handle="max"></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="cell-dashboard">
<div id="programmatic_chart_div"></div>
</td>
</tr>
</table>
推荐阅读
- mongodb - MongoDB 无法连接 - pymongo
- python - 反转 matplotlib 中的堆叠条形图
- react-native - 反应原生多图像裁剪器
- data-structures - 图的数据结构
- python - 追加是相乘而不是只取两个
- c - 这个 C 程序中的“else if”条件有什么问题?
- robotframework - Robot框架中的排序或反向列表
- ms-media-foundation - Media Foundation Source Reader:视频时间戳每 N 个样本增加 16 毫秒
- vba - 处理空的组合框
- python - 如何从 python 中的多个数据帧创建单个数据帧?