JSON 데이터가 c3.js 막 대형 차트에 표시되지 않습니다.

Question

C3.js 차트 라이브러리를 사용합니다.

그러나 동적으로 JSON 데이터를 생성하고 차트에로드 할 때 막대가 표시되지 않습니다.

c3.generate({ 
 
    bindto: '#chartFbPosts', 
 
    data: { 
 
    json: [{ 
 
     "shares": 27, 
 
     "likes": 241, 
 
     "comments": 300 
 
    }, { 
 
     "shares": 24, 
 
     "likes": 220, 
 
     "comments": 22 
 
    }, { 
 
     "shares": 19, 
 
     "likes": 208, 
 
     "comments": 81 
 
    }], 
 
    type: 'bar' 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<script src="https://interestinate.com/wp-content/themes/dashboard/third_party/c3/c3.min.js"></script> 
 
<div id="chartFbPosts"></div>

Answer 1

이 시도하고 필요에 따라 변경하십시오

아래의 코드 조각을 참조하십시오.

var jsonData = [ 
    {name: 'www.site1.com', upload: 200}, 
    {name: 'www.site2.com', upload: 100}, 
    {name: 'www.site3.com', upload: 300}, 
    {name: 'www.site4.com', upload: 400} 
] 

var data = {}; 
var sites = []; 
jsonData.forEach(function(e) { 

    sites.push(e.name); 
    data[e.name] = e.upload; 
})  

chart = c3.generate({ 
bindto: '#chartFbPosts', 
    data: { 
     json: [ data ], 
     keys: { 
      value: sites, 
     }, 
     type:'pie' 
    }, 
}); 

참조하십시오 여기 http://jsfiddle.net/2nf9a7x4/