时间戳

首页 > 解决方案 > 日期范围选择器和图表 js

javascript - 日期范围选择器和图表 js

问题描述

我想根据我的日期范围选择器更改图表 js 上的 x 轴标签。如果我选​​择本周，那么 x 轴标签应该从星期日开始到星期六。如果我选择这个月，那么 x 轴标签应该从 10 月 1 日开始...... 10 月 30 日。如果我选​​择上个月，那么应该是 9 月 1 日...... 9 月 30 日。如果我选​​择日期范围，那么它应该应该从开始月份到结束月份。

直到现在我试过这个，但我肯定知道。这是垃圾。

$('#report-overview-range').on('apply.daterangepicker', function(ev, picker) {
      let startDate = picker.startDate.format('YYYY-MM-DD');
      let endDate = picker.endDate.format('YYYY-MM-DD');
      let date= startDate+'&'+endDate;
      $(this).attr('date', date);  
      let today = moment().format('YYYY-MM-DD');
      let dateDiff = moment(today).diff(moment(startDate), 'days');
      /*If date difference is a 6 then its a week 
        if date difference is greater than 31 then its a */       
    });

标签： javascriptchartschart.jsdaterangepickerchartjs-2.6.0

解决方案

您可以这样做的一种方法是动态分配要从中获取数据的端点。

$('#report-overview-range').on('apply.daterangepicker', function (ev, picker) {
    let startDate = picker.startDate.format('YYYY-MM-DD');
    let endDate = picker.endDate.format('YYYY-MM-DD');
    let date = startDate + '&' + endDate;
    $(this).attr('date', date);
    let today = moment().format('YYYY-MM-DD');
    let dateDiff = moment(today).diff(moment(startDate), 'days');
    if (dateDiff < 6) {
        dataEndpoint = "weekRange.php?" + date;
        title = "Week View";
    } else {
        dataEndpoint = "monthRange.php?" + date;
        title = "Month View";
    }

    // assign a reference to the chart in the dom
    let chartRef = document.getElementById("chart-id-goes-here").getContext('2d');

    $.ajax({
        url: dataEndpoint,
        dataType: 'json',
        success: function (graphData) {
            new Chart(chartRef, {
                type: 'bar',
                data: {
                    labels: Object.keys(graphData),
                    datasets: [{
                        label: title,
                        data: Object.values(graphData),
                    }] //end datasets
                }, //end data
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    }
                }
            });
        }
    })
});

在此示例中，有一个 if 语句可以更改变量dataEndpoint。我正在对您获取数据的方式做出一些假设，但该策略通常应该有效。

如果您将 x 轴映射到键并将 y 轴映射到对，它将分别使用Object.keys(graphData)和正确填充表格Object.values(graphData)。这是 weekRange.php 的示例返回（我将其扔到现有项目中，这会稍微影响 CSS）：

{
    "Sun":"41454.33",
    "Mon":"17546.34",
    "Tue":"12558.60",
    "Wed":"25757.79",
    "Thur":"26119.51",
    "Fri":"21195.63",
    "Sat":"20528.79"
}

填充后的图表： chart.js 动态填充 x 轴

这是 monthRange.php 返回的一些垃圾数据：

{
    "1": "880.33",
    "2": "387.77",
    "3": "1056.54",
    "4": "48.58",
    "5": "1107.97",
    "6": "852.45",
    "7": "534.34",
    "8": "349.77",
    "9": "324.77",
    "10": "464.51",
    "11": "1135.88",
    "12": "514.75",
    "13": "278.85",
    "14": "176.22",
    "15": "167.96",
    "16": "424.49",
    "17": "1123.37",
    "18": "469.74",
    "19": "1844.47",
    "20": "346.86",
    "21": "424.05",
    "22": "664.59",
    "23": "985.48",
    "24": "1288.77",
    "25": "821.07",
    "26": "969.48",
    "27": "814.52",
    "28": "164.76",
    "29": "184.77",
    "30": "1730.73",
    "31": "657.75"
}

以下是这些数据在同一张图表上的样子： chart.js 动态填充 x 轴 2

我不确定dateDiff这个逻辑，我认为您可能需要对其进行返工以返回一个整数。

推荐阅读