Javascript 如何按月筛选chart.js
我目前面临一个问题,不知道从哪里开始。我正在尝试创建一个下拉菜单,其中存储我的筛选函数的值。假设我想过滤过去三个月的结果,然后点击显示为3个月的框。该函数将捕获该值,然后过滤chart.js图形,仅显示过去三个月的结果 这是我的密码 这是ajax调用:Javascript 如何按月筛选chart.js,javascript,ajax,django-rest-framework,chart.js,Javascript,Ajax,Django Rest Framework,Chart.js,我目前面临一个问题,不知道从哪里开始。我正在尝试创建一个下拉菜单,其中存储我的筛选函数的值。假设我想过滤过去三个月的结果,然后点击显示为3个月的框。该函数将捕获该值,然后过滤chart.js图形,仅显示过去三个月的结果 这是我的密码 这是ajax调用: endpoint = 'api/chart/data' var myChart2; var myChart3; var sales_time; var sales_rev; $.ajax({
endpoint = 'api/chart/data'
var myChart2;
var myChart3;
var sales_time;
var sales_rev;
$.ajax({
type: "GET",
url: endpoint,
success: function(data){
window.sales_time = data.sales_time_axis
window.sales_rev = data.sales_rev
conversion_label = data.conversion_label
conversion_data= data.conversion_data
profit_data_per_project= data.profit_data_per_project
createChart()
},
error: function(error_data){
console.log('error')
console.log(error_data)
}
})
将以以下格式返回数据:
HTTP 200 OK
Allow: GET, HEAD, OPTIONS
Content-Type: application/json
Vary: Accept
{
"sales_rev": [
[
100000
],
[
125000
],
[
123000
]
],
"sales_time_axis": [
[
"2019-12-29T10:42:25Z"
],
[
"2019-12-23T03:13:03Z"
],
[
"2019-12-23T02:50:51Z"
]
],
"conversion_label": [
"Converted",
"Not Converted"
],
"conversion_data": [
3,
1
],
"profit_data_per_project": [
[],
[],
[]
]
}
到目前为止,我已使用以下函数成功更新了图形:
function applyFilter(){
var e = document.getElementById("elementId");
var value = parseInt(e.options[e.selectedIndex].value);
this.myChart2.data.datasets[0].data = this.sales_rev;
this.myChart2.data.datasets.forEach((data,i) => {
this.myChart2.data.datasets[i].data = data.data.map
(v => {
if(v == value) return v;
else return 0;
});
});
this.myChart2.update();
}
这是呈现图表的函数:
function createChart(){
var ctx2 = document.getElementById('myChart2').getContext('2d');
window.myChart2 = new Chart(ctx2, {
type: 'line',
data: {
labels: sales_time,
datasets: [{
label: sales_time,
data: sales_rev,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
最后这是我的html:
<div class="card-body" id="card_body">
<select class="text_select" id="elementId" onchange="applyFilter()" name="select">
<option value="All">All Time</option>
<option value=100000>Last 3 Months</option>
<option value=125000>Last 6 Months</option>
<option value="12">Last Year</option>
<option value="24">Last 2 Years</option>
</select>
<canvas id="myChart2"></canvas>
</div>
一直
过去3个月
过去6个月
去年
过去两年
如果有人能给我一个起点,那就太好了,因为我对javascript非常陌生,我不知道如何根据日期过滤结果。非常感谢您的帮助 使用ECMAScript 5提供的日期对象 要创建表示当前日期的对象,只需调用
const now = new Date()
例如,我将取数组中的一个字符串:
const dateFromString = new Date("2019-12-29T10:42:25Z")
此外,您还可以设置月份
var d = new Date();
d.setMonth(d.getMonth() - 3);
你可以用这些对象做很多事情,它们有很多方法。
此外,还可以比较日期对象
now > dateFromString // will return true or false
要从1970-01-01获得毫秒,请使用此
const a = new Date()
a.getTime()
//1577724851239