在视图中构造要发送到HighCharts的数据

Question

我目前正在使用把手作为模板引擎，并使用HighCharts.js作为图形引擎来处理Node.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.log(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还是陌生的，到目前为止，我已经将它用于一些小事情。 谢谢！

Answer 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.log(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);