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/