Question

我目前遇到问题，不知道从哪里开始。我正在尝试创建一个下拉菜单，用于存储我的过滤器功能的值。假设我希望过滤过去三个月的结果，然后点击显示三个月的框。该值将由函数捕获，然后将过滤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>

如果有人可以给我一个起点，那太好了，因为我对javascript很陌生，我不知道一种基于日期过滤结果的方法。非常感谢您的帮助！

Answer 1

使用ECMAScript 5提供的Date对象

只需调用即可创建代表当前日期的对象

    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年1月1日以来的毫秒数，请使用此

    const a = new Date()
    a.getTime()
    //1577724851239

如何按月过滤chart.js

1 个答案: