Структурирование данных для отправки в HighCharts в представлении

В настоящее время я работаю над проектом 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 в таком большом проекте, до этого момента я использовал его для мелочей. Спасибо!

Что вы видите? Вы сделали console.info() или отладили получившуюся структуру? Соответствует ли это тому, что вы ожидаете? Что не работает?

Marc 01.05.2018 23:15

Сегодня вечером я провел некоторую отладку и не смог точно определить, в чем именно заключалась проблема. Утром выложу решение.

Foxhound013 02.05.2018 05:42
Поведение ключевого слова "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) для оценки ваших знаний,...
1
2
59
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

После запуска отладчика 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);

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