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

Question

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

1

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

Rey Young 25 окт. 2018, в 14:03

Источник

Теги:

javascript

chart.js

charts

chartjs-2.6.0

daterangepicker

1 ответ

Ещё вопросы

Timpy · Answer 1 · 2018-10-25T11-26-00.000Z

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

$('#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) соответственно. Вот пример return для 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 в этой логике, я думаю, вам может понадобиться переработать его, чтобы вернуть целое число.

хорошо, я посмотрю это позже. Выглядит полезным. Но не могли бы вы помочь мне с этим? .. Я не могу удалить все метки и данные на ajax. Я использовал функцию, указанную в документации, но ее бесполезно. всплывает только одна метка и одна информация. Я хочу удалить все метки и данные и создать новый
Если вы публикуете больше своего кода, мы можем работать над ним вместе. Мне нужно увидеть данные, с которыми вы работаете, ваша структура данных повлияет на вашу логику.
stackoverflow.com/questions/52990134/… я спросил это здесь