Question

我想根据日期范围选择器更改图表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 */       
    });

Answer 1

执行此操作的一种方法是动态分配要从中获取数据的端点。

$('#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"
}

填充后的图表：

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

以下是此数据在同一张图表上的样子：

我不确定dateDiff是否符合这种逻辑，我认为您可能需要重新编写才能返回整数。

日期范围选择器和图表js

1 个答案: