В настоящее время я работаю над проектом Node.js, используя ручки в качестве механизма создания шаблонов и HighCharts.js в качестве графического движка для визуализации некоторых диаграмм на стороне клиента. Я успешно перенес данные из своей базы данных и отрендерил их в HighCharts, но мне нужно реструктурировать данные, чтобы добиться того, что я пытаюсь сделать. Я использую график с накоплением столбцов с часами дня на оси y и датой на оси x, в любое время, когда идет дождь, на графике должен отображаться синий столбец с накоплением, если нет дождя, должен отображаться прозрачный столбец быть сложенными. Примерное представление о том, о чем я говорю, можно увидеть на изображении ниже.
Мои данные из базы данных изначально структурированы, как показано ниже.
{ tstamp: 2010-11-05T02:00:00.000Z,
rain: 0.2647019028663635,
rainhr: true,
latitude: 40.6875,
longitude: -86.9375,
date: '11/04/2010',
hour: '22' },
{ tstamp: 2010-11-05T03:00:00.000Z,
rain: 0.5646802186965942,
rainhr: true,
latitude: 40.6875,
longitude: -86.9375,
date: '11/04/2010',
hour: '23' },
{ tstamp: 2010-11-05T04:00:00.000Z,
rain: 0.08448517322540283,
rainhr: true,
latitude: 40.6875,
longitude: -86.9375,
date: '11/05/2010',
hour: '00' },
{ tstamp: 2010-11-05T05:00:00.000Z,
rain: 0,
rainhr: false,
latitude: 40.6875,
longitude: -86.9375,
date: '11/05/2010',
hour: '01' },
{ tstamp: 2010-11-05T06:00:00.000Z,
rain: 0,
rainhr: false,
latitude: 40.6875,
longitude: -86.9375,
date: '11/05/2010',
hour: '02' },
На стороне сервера я пытался выполнить некоторую обработку данных, чтобы отправить их на клиентскую сторону, готовые для использования HighCharts.
Структура данных, которую я пытался использовать, выглядит следующим образом:
var testData = {
day: '',
hour: [],
color: []
}
dataArray = [];
Один день должен быть у каждого объекта, а доступные часы и цвета (синий или прозрачный [дождь или без дождя]) должны быть в объекте testData. Как только я перебираю все дневные значения (например, все значения, связанные с 11/5/2010), объект должен быть помещен в dataArray, и я бы начал с объекта testData в новый день. То, что я пытался обработать до сих пор, показано ниже.
var prevDate = wxPrecipResult.recordset[0].date;
for (let i = 0; i < wxPrecipResult.recordset; i++) {
currentDate = wxPrecipResult.recordset[i].date;
testData.day = currentDate;
console.info(testData);
if (currentDate === prevDate) {
testData.hour.push(wxPrecipResult.recordset[i].hour);
if (wxPrecipResult.recordset[i].rainhr === 1) {
testData.color.push('rgba(0,0,255,1)');
} else {
testData.color.push('rgba(0,0,0,0)');
}
} else {
dataArray.push(testData);
}
prevDate = currentDate;
}
Любая помощь будет принята с благодарностью. Я все еще новичок в использовании JavaScript в таком большом проекте, до этого момента я использовал его для мелочей. Спасибо!
Сегодня вечером я провел некоторую отладку и не смог точно определить, в чем именно заключалась проблема. Утром выложу решение.
После запуска отладчика VsCode, похоже, возникла какая-то странная проблема с циклом for. После очистки части моего старого закомментированного кода и завершения исправления логики, лежащей в основе структурирования данных, теперь, похоже, все в порядке. Исправленный код ниже, надеюсь, это будет кому-то полезно.
var testData = {
day: wxPrecipResult.recordset[0].date,
datapairs: []
};
var dataArray = [];
//
var prevDate = testData.day;
for (let i = 0; i < wxPrecipResult.recordset.length; i++) {
currentDate = wxPrecipResult.recordset[i].date;
// testData.day = currentDate;
// console.info(testData);
if (currentDate !== prevDate) {
dataArray.push(testData);
testData = {
day: currentDate,
datapairs: []
};
}
var datapair = {
hour: wxPrecipResult.recordset[i].hour,
color: ''
}
if (wxPrecipResult.recordset[i].rainhr === true) {
datapair.color = 'rgba(0,0,255,1)';
} else {
datapair.color = 'rgba(0,0,0,0)';
}
testData.datapairs.push(datapair);
prevDate = currentDate;
}
dataArray.push(testData);
Что вы видите? Вы сделали
console.info()
или отладили получившуюся структуру? Соответствует ли это тому, что вы ожидаете? Что не работает?