javascript - 如何使用 datepicker 过滤 chart.js?
问题描述
我是编程新手。我有一个由 chart.js 制作的图表,其中包含来自 API 的数据。这是我的 API 网址:https ://gmlews.com/api/data/?node_id=1
我想从图表上的 API 图制作我的水分数据。y 轴用于水分数据,X 轴来自我在 API 上的时间戳。我尝试使用 datepicker 来管理要在图表上显示的数据。
所以,到目前为止,这是我的代码:
$(function() {
$('input[name="datefilter"]').daterangepicker({
showDropdowns : true,
autoUpdateInput: false,
locale: {
cancelLabel: 'Clear'
}
});
$('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format('DD/MM/YYYY'));
var fromDate = picker.startDate.format('DD/MM/YYYY');
var toDate = picker.endDate.format('DD/MM/YYY');
if (fromDate != '' && toDate != '') {
console.log(fromDate, toDate);
var endpoint = 'https://gmlews.com/api/data/?node_id=1';
$.ajax({
method: "GET",
url: endpoint,
data: {
fromDate: fromDate,
toDate: toDate
},
success: function(data){
console.log(data); //get all data
//get data by fields
var hum = [], time = [];
for (var i=0; i<data.length; i++){
hum.push(data[i].moisture);
time.push(data[i].timestamp);
}
console.log(hum);
console.log(time);
//plot the chart
var ctx = document.getElementById("moistureChart").getContext('2d');
var moistureChart = new Chart(ctx, {
type: 'line',
data: {
labels: time,
datasets: [{
label: 'kelembaban',
data: hum,
backgroundColor: [
'#ff000000'
],
borderColor: [
'#331698'
],
borderCapStyle: 'round',
borderWidth: 1
}]
},
options: {
reponsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero:false,
stepSize:10
},
scaleLabel: {
display: true,
labelString: 'kelembaban'
}
}],
xAxes: [{
display: true,
type: "time",
time: {
minUnit: "hour",
unit: "hour",
unitStepSize: 6,
min: moment(fromDate).toDate(),//Date object type
max: moment(toDate).toDate()//Date object type
},
scaleLabel: {
display: true,
labelString: 'Time'
}
}]
}
}
});
},
error: function(error_data){
console.log(error_data)
}
});
} //if function
}); //tombol apply
$('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
$(this).val('');
});
});
您可以在此处从小提琴访问代码:https ://jsfiddle.net/estri012/ftu8g74c/5/
问题是当我尝试从 datepicke 中选择日期时,例如:从 5 月 7 日到 5 月 8 日的日期。它不会加载任何东西,但实际上 API 中 5 月 7 日的数据是存在的。然后当我尝试选择从 5 月 13 日到 5 月 14 日的日期时,日期选择器过滤器不起作用,它只显示我在 API 中拥有的所有数据。你能帮我解决这个问题吗?谢谢!
解决方案
首先,您尝试通过发送 fromDate 和 toDate 参数从 API 中过滤数据。我到达了https://gmlews.com/api/data/?node_id=1但没有找到关于可以使用的参数的文档。
如果我尝试使用 &fromDate=2020-05-29&toDate=2020-05-29 进行 GET,我会收到相同的数据,就像我在没有参数的情况下调用端点一样。在 POST 中也一样。
您不应该发送时间戳而不是日期格式吗?
您的格式化日期是 YYYY-MM-DD 格式吗?
推荐阅读
- javascript - 结合两个docker镜像,防止docker inside docker
- reactjs - 更新嵌套状态对象中的单个记录,react-redux
- r - 使用 geom_smooth 添加回归线以绘制 R 中的离散 x 轴
- reactjs - 在基于类的组件中初始化反应钩子
- github - 无法在只读编辑器 Codesandbox 中编辑
- c# - 如何让滚动视图只影响内部框架,而不是整个应用程序
- pandas - 如何在 seaborn 散点图中绘制核密度估计
- c# - WPF comboboxitem 前景色改变
- reactjs - 如何将胜利图导出为png?
- google-apps-script - 如何使用 Google App 脚本读取 google 表单中选定的单选按钮值