Question

我目前正在使用把手作为我的模板引擎和HighCharts.js作为我的图形引擎在Node.js项目上工作，以在客户端渲染一些图表。我已成功从我的数据库中引入数据并在HighCharts中呈现它，但我需要重新构建数据以实现我想要做的事情。我使用堆积的柱形图，其中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对象中。一旦我循环遍历所有日期值（例如与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循环有一些奇怪的问题。在清理了一些旧的注释代码并完成修复数据结构背后的逻辑之后，现在一切似乎都井井有条。修正后的代码如下，希望这对某人有帮助。

-----> Node.js app detected
-----> Creating runtime environment

       NPM_CONFIG_LOGLEVEL=error
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true
-----> Installing binaries
       engines.node (package.json):  9.11.1
       engines.npm (package.json):   unspecified (use default)

       Resolving node version 9.11.1...
       Downloading and installing node 9.11.1...
       Using default npm version: 5.6.0
-----> Restoring cache
       Skipping cache restore (new-signature)
-----> Building dependencies
       Installing node modules (package.json + package-lock)
       added 365 packages in 8.599s
-----> Caching build
       Clearing previous node cache
       Saving 2 cacheDirectories (default):
       - node_modules
       - bower_components (nothing to cache)
-----> Pruning devDependencies
       Skipping because npm 5.6.0 sometimes fails when running 'npm prune' due to a known issue
       https://github.com/npm/npm/issues/19356

       You can silence this warning by updating to at least npm 5.7.1 in your package.json
       https://devcenter.heroku.com/articles/nodejs-support#specifying-an-npm-version
-----> Build succeeded!
-----> Node.js app detected
-----> Requested node range:  9.11.1
-----> Resolved node version: 9.11.1
-----> Downloading and installing node
 !     Push rejected, failed to compile Node.js app.
 !     Push failed

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

1 个答案: