C3 - JSON 및 카테고리가 포함 된 일간 차트

Question

처음으로 C3 라이브러리를 사용하고 있으며 간단하고 재사용 가능한 차트를 통증없이 디자인 할 수있는 좋은 대안이라고 생각합니다.

그러나 timeseries 차트 디자인에 몇 가지 문제가 있습니다. 여기 내가 내 차트를 생성하는 데 사용하는 JSON 파일의 예입니다 :

data: { 
    json: [ 
    { 
     "city": "Paris", 
     "date": "2016-09-01", 
     "event": 234 
    }, 
    { 
     "city": "Paris", 
     "date": "2016-09-02", 
     "event": 891 
    }, 
    { 
     "city": "Paris", 
     "date": "2016-09-03", 
     "event": 877 
    }, 
    { 
     "city": "Berlin", 
     "date": "2016-09-01", 
     "event": 190 
    }, 
    { 
     "city": "Berlin", 
     "date": "2016-09-02", 
     "event": 234 
    }, 
    { 
     "city": "Berlin", 
     "date": "2016-09-03", 
     "event": 231 
    }, 
    { 
     "city": "London", 
     "date": "2016-09-01", 
     "event": 23 
    }, 
    { 
     "city": "London", 
     "date": "2016-09-02", 
     "event": 12 
    }, 
    { 
     "city": "London", 
     "date": "2016-09-03", 
     "event": 89 
    }, 
], 

문제는 내가 모두 내 축 X를 설정할 수 있다는 것입니다 : 카테고리로 시계열 유형과 키 "도시"로 유형. 지금은

나는이 :

keys: { 
    x: 'period', 
    value: ['event'], 
}, 
axis: { 
x: { 
    type: 'timeseries', 
    tick: { 
    format: '%Y-%m-%d' 
    } 
} 
}, 
type: 'spline' 

그리고 해당 Plunker가 : http://plnkr.co/edit/T1aLWQpaFwdu2zsWCa3d

내가 JSON 파일에서 검색되는 3 개 도시에 해당하는 3 개 스플라인을하고 싶습니다.

이 문제를 해결할 수 있습니까?

은 대단히 감사합니다 :)

Answer 1

현재의 예에 가깝다 C3 허용 발견 형식으로 데이터를 다툰 필요 - 우리가 필요한 것입니다 당신을 위해>https://jsfiddle.net/maxklenk/k9Dbf/

 var json = <defined here> 

     // group json by date 
     var nestedData = d3.nest().key(function(d) { return d.date; }).entries(json); 
     var cities = d3.set(); // this keeps a record of the cities mentioned so we don't need to hard-code them later on 
     // run through the dates and make new objects of city=entry pairs (and the date=whatever) 
     // all stored in a new array (formattedData) which we can feed to the chart json argument 
     var formattedData = nestedData.map (function (entry) { 
     var values = entry.values; 
     var obj = {}; 
     values.forEach (function (value) { 
      obj[value.city] = value.event; 
      cities.add(value.city); 
     }) 
     obj.date = entry.key; 
     return obj; 
     }); 


     var chart = c3.generate({ 
     data: {json: formattedData, 
      keys: { 
       x: 'date', // it's possible to specify 'x' when category axis 
       value: cities.values(), 
      } 
     }, 
... 

:

[{ 
    date = val 
    London = val 
    Paris = val 
    Berlin = val 
}, 
... 
] 

같은 항목의 배열은 우리가 원래 JSON을 조작해야하는 것을해야 할 일

편집 된 plunkr (http://plnkr.co/edit/5xa4z27HbHQbjcfpRLpQ?p=preview)을 참조하십시오.