Выбор диапазона дат и диаграмма js

Я хочу изменить метку оси 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 */       
    });
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
0
4 201
1

Ответы 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"
}

И диаграмма после заполнения: 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 в этой логике, думаю, вам, возможно, придется переделать его, чтобы он возвращал целое число.

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

Rey Young 25.10.2018 14:38

Если вы разместите больше кода, мы сможем работать над ним вместе. Мне нужно увидеть данные, с которыми вы работаете, ваша структура данных повлияет на вашу логику.

bbenz 25.10.2018 15:24
stackoverflow.com/questions/52990134/… я спросил это здесь
Rey Young 25.10.2018 15:33

Другие вопросы по теме