2017-01-23 4 views
0

Я пытаюсь нарисовать график, используя c3.js. Я смог следить за запуском, поэтому я знаю, что модуль работает правильно, но у меня возникают проблемы с отображением графика, когда я пытаюсь использовать свои собственные данные.Загрузка JSON в C3.js с использованием экспресс-маршрутов javascript

Я беру данные из базы данных и хранить его, как так:

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' 
    } 
    } 
}); 
+0

Просто выбросьте некоторые идеи здесь. Возможно ли, что ваша 'c3.generate()' строка кода получает удар, прежде чем 'router.get()' обещание разрешено? Как тест, если вы замените свой 'json: allData' на жестко закодированный образец, работает ли он так, как ожидалось? –

ответ

0

Проблемы здесь является вашим недостающим определением того, как ваша метка выглядит. Как 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), вы должны смотреть на time formatting api Д3, чтобы получить нужный шаблон.

Смежные вопросы