Выбор диапазона дат и график JS - PullRequest
Новая
       45

Выбор диапазона дат и график JS

0 голосов
/ 25 октября 2018

Я хочу изменить метку оси X на графике js в соответствии с моим выбором диапазона дат. Если я выберу эту неделю, метка оси X должна начинаться с воскресенья по субботу.Если я выберу этот месяц, то метка оси X должна начинаться с 1 октября .... 30 октября. Если я выберу последний месяц, то это будет 1 сентября ... 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 */       
    });

1 Ответ

0 голосов
/ 25 октября 2018

Один из способов сделать это - динамически назначить конечную точку, из которой вы хотите получить данные. 

$('#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 dynamically populated x axis

Это некоторые ненужные данные, которые возвращает 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 dynamically populated x axis 2

Я не уверен насчет dateDiff в этой логике, я думаю, что вам, возможно, придется переработать его, чтобы получить целое число.

...