Javascript 如何按月筛选chart.js

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({

我目前面临一个问题,不知道从哪里开始。我正在尝试创建一个下拉菜单,其中存储我的筛选函数的值。假设我想过滤过去三个月的结果,然后点击显示为3个月的框。该函数将捕获该值,然后过滤chart.js图形,仅显示过去三个月的结果

这是我的密码

这是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