Я пытаюсь визуализировать линейный график, используя chartjs, показывающий даты из файла JSON, и он должен иметь следующие характеристики:
- Ось X должна состоять из 16 разных дат, распределенных по 30, 60 или 90 дней (можно изменить с помощью раскрывающегося меню)
- Ось Y показывает количество встреч с пациентами, которые имели место в каждую дату
- Есть два массива, которые будут отображаться в виде линийна диаграмме: один для общего числа встреч и один для первых встреч с пациентами (т. е. новых пациентов / первых посещений)
Я получил диаграмму, чтобы показать более или менее общее и первые встречи, но чем выше диапазон дней, тем более разреженными являются данные, поскольку даты в файле JSON часто попадают между 16 значениями дат.Мой главный вопрос: как я могу добавить эти промежуточные встречи к их ближайшему совпадению по оси X?Это в основном то, что я придумал до сих пор, и это не работает:
Функция, которая создает ось X:
function calcLabels() {
timeAxis = [];
timeAxisDates = [];
if (!isYearView) {
numberOfGraphValues = 16;
switch (tabDays) {
case 30:
timeInterval = 2;
break;
case 60:
timeInterval = 4;
break;
case 90:
timeInterval = 6;
}
let dateForArray = new Date();
for (let i = 1; i < numberOfGraphValues; i++) { //Find 16 dates spread across the number of months
timeAxisDates.push(new Date(dateForArray));
let theDate = dateForArray.getDate();
if (theDate === 1 || theDate <= timeInterval || i === (numberOfGraphValues-1)) {
theDate = nameMonth(dateForArray.getMonth()) + ' ' + theDate; //Add the month name if it's the 1st or 2nd day of it
}
dateForArray.setDate(dateForArray.getDate() - timeInterval);
timeAxis.push(theDate)
}
timeAxisDates.reverse();
timeAxis.reverse();
} else { //Is YTD
numberOfGraphValues = 12;
timeAxis = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
timeAxisDates = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
}
}
Проблемный код, который должен найтивсе встречи и назначение их на даты:
function countEncounters() {
resetPatients();
let patientData = JSON.parse(sessionStorage.getItem('patient_data'));
let index = 0;
for (let patient in patientData) {
if (patient === '00000000') continue;
//Find the encounter
let isNewPatient = true;
for (let encounter in patientData[patient].patientEncounters) {
let formattedDate = formatDate(patientData[patient].patientEncounters[encounter].encounterDate); //This function simply changes the date form from a JSON string, e.g. "20181012" to a date object
formattedDate.setHours(0, 0, 0, 0);
patientEncounters[index] = {"date": formattedDate};
if (isNewPatient) firstPatientEncounter[index] = {"date": formattedDate};
isNewPatient = false;
index++;
}
}
//Find the date on the axis in the graph
if (!isYearView) {
for (let i = 0; i < timeAxis.length; i++) {
for (let date in patientEncounters) {
let dayAfter = [];
for (let j=0; j<timeInterval; j++){
dayAfter.push(timeAxisDates[i].getDate() + j)
}
// dayAfter.setDate(timeAxisDates[i].getDate() + 1);
if (patientEncounters[date].date.getMonth() === timeAxisDates[i].getMonth()) { //compare months and days
if (patientEncounters[date].date.getDate() === timeAxisDates[i].getDate() || checkRange(patientEncounters[date].date.getDate(), dayAfter)) {
totalPatients[i]++
}
}
if (firstPatientEncounter[date] != null) {
if (firstPatientEncounter[date].date.getMonth() === timeAxisDates[i].getMonth() ) { //compare months and days
if (firstPatientEncounter[date].date.getDate() === timeAxisDates[i].getDate() || checkRange(patientEncounters[date].date.getDate(), dayAfter)) {
newPatients[i]++
}
}
}
}
}
} else { //YTD
for (let i = 0; i < 12; i++) {
for (let date in patientEncounters) {
if (patientEncounters[date].date.getMonth() === timeAxisDates[i + 1]) {
if (lastYear) {
if (patientEncounters[date].date.getFullYear() === (year - 1)) {
totalPatients[timeAxisDates[i]]++
}
} else {
totalPatients[timeAxisDates[i]]++
}
if (firstPatientEncounter[date] != null) {
if (firstPatientEncounter[date].date.getMonth() === timeAxisDates[i + 1]) {
if (lastYear) {
if (firstPatientEncounter[date].date.getFullYear() === (year - 1)) {
newPatients[timeAxisDates[i + 1]]++
}
} else {
newPatients[timeAxisDates[i]]++
}
}
}
}
}
}
}
}
function checkRange(date, array){
for (let i=0; i<array; i++){
if (date === array[i]) return true
}
return false
}
Я еще не закончил год к дате, но у него также есть ошибки, поэтому любые советы о том, как сделать эту работу, также будут оценены.Однако выяснение того, что я делаю неправильно в представлении дней, вероятно, исправит это.