Я хочу изменить метку оси 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 */
});
Один из способов сделать это - динамически назначить конечную точку, с которой вы хотите получать данные.
$('#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
в этой логике, думаю, вам, возможно, придется переделать его, чтобы он возвращал целое число.
Если вы разместите больше кода, мы сможем работать над ним вместе. Мне нужно увидеть данные, с которыми вы работаете, ваша структура данных повлияет на вашу логику.
хорошо, я посмотрю это позже. Выглядит полезно. Но не могли бы вы помочь мне с этим? .. Я не могу удалить все метки и данные на ajax. Я использовал функцию, указанную в документации, но она бесполезна. выскакивает только одна метка и одни данные. Я хочу удалить все метки и данные и создать новый