代码之家 › 专栏 › 技术社区 › Foxhound013

将要发送到视图中的HighCharts的结构化数据

highcharts data-structures node.js javascript

Foxhound013 · 技术社区 · 6 年前

我当前正在处理一个节点。js项目使用Handlebar作为我的模板引擎和HighCharts。js作为我的图形引擎,在客户端呈现一些图表。我已经成功地从数据库中引入了数据,并将其呈现在高图中,但我需要重新构建数据,以实现我正在尝试的目标。我使用的是一个堆叠的柱状图,y轴上显示一天中的小时数,x轴上显示日期,下雨的任何时候,都应该在图上显示一个堆叠的蓝色列,如果没有下雨,则应该堆叠一个透明列。下面的图片可以大致了解我所说的内容。

stacked column graph

我的数据库数据最初的结构如下所示。

    { 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对象中。一旦我循环了所有的日期值(例如与2010年11月5日相关的所有值),对象应该被推送到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还是新手,到目前为止,我已经在一些小事情上使用过它。谢谢

1 回复 | 直到 6 年前

Foxhound013 6 年前

在运行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);