2017-01-23 6 views
0

c3.js를 사용하여 그래프를 그려 나가려고합니다. 나는 모듈이 올바르게 작동하고 있다는 것을 알기 위해 시작을 할 수 있었지만, 내 자신의 데이터를 사용할 때 그래프가 표시되지 않는 문제가 있습니다. 나는 데이터베이스에서 데이터를 복용 등처럼 저장하고javascript express routes를 사용하여 JSON을 C3.js로로드

:

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

이 데이터 :이 작동 확실히 알고

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(); 
    }); 
}); 

, 그것은 긴 문자열에 다음과 같은 출력을 제공합니다 다음과 같이 index.js를 사용하여 내보기에로드됩니다.

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

여기의 샘플에 따르면 : 01

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

여기에 아이디어를 던지십시오. 'router.get()'약속이 해결되기 전에 당신의'c3.generate()'코드 라인이 타격을받을 가능성이 있습니까? 테스트와 마찬가지로 '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)를 사용하면 원하는 패턴을 얻을 D3의 time formatting api 살펴 보셔야합니다.