使用 javascript express 路由将 JSON 加载到 C3.js答案

【问题标题】：Loading JSON into C3.js using javascript express routes使用 javascript express 路由将 JSON 加载到 C3.js
【发布时间】：2017-06-08 06:23:37
【问题描述】：

我正在尝试使用 c3.js 绘制图表。我能够按照入门指南进行操作，因此我知道模块工作正常，但是当我尝试使用自己的数据时，我遇到了图表不显示的问题。

我正在从数据库中获取数据并像这样存储它：

MongoClient.connect(url, function(err, db) {
  assert.equal(null, err);
  console.log("Connected successfully to server");
  findDocuments(db, function(docs){
      //console.log(docs);
      exports.getData = function(){
        return docs;
      }
    db.close();
  });
});

我知道这确实有效，它以长字符串形式提供以下输出：

[{"_id":"5885dc66c2ef160d2163fb79",
 "temperature":18,
 "humidity":27,
 "visibleLight":260,
 "irLight":255,
 "date":"2017-01-23T10:35:16+00:00",
 "epochtime":1485167716703}]

然后使用 index.js 将这些数据加载到我的视图中，如下所示：

router.get('/', function (req, res) {
  res.render('index', { 
    title: 'Dashboard', 
    allData: db.getData()
  });
})

根据此处的这些示例：http://c3js.org/samples/data_json.html 我尝试绘制图表：

var chart = c3.generate({
  data: {
    json: allData,
    keys: {
      x: 'date', // it's possible to specify 'x' when category axis
      value: ['temperature', 'humidity'],
    }
  },
  axis: {
    x: {
      type: 'timeseries'
    }
  }
});

【问题讨论】：

只是在这里抛出一些想法。在解决router.get() 承诺之前，您的c3.generate() 代码行是否有可能被击中？就像测试一样，如果您将 json: allData 替换为硬编码示例，它是否按预期工作？

标签： javascript json node.js ejs c3.js

【解决方案1】：

这里的问题是您缺少对时间戳的定义。 c3/d3应该怎么知道你用的是什么模式？

var chart = c3.generate({
    data: {
            //use xFormat to define how your pattern looks like
            xFormat: '%Y-%m-%dT%H:%M:%S+00:00',
            json: [ 
                // your awesome data
            ],
            keys: {
                x: 'date',
                value: ['temperature', 'humidity'],
            }
        },
        axis: {
            x: {
                type: 'timeseries',
                tick: {
                //use tick.format to change how your pattern
                //will look in your chart (maybe more user friendly)
                format: '%Y-%m-%d'
                }
            }
        }
});

由于您的时区偏移看起来很奇怪 (+00:00)，您应该查看 d3 的 time formatting api 以获得所需的模式。

【讨论】：