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/

JSON 数据未显示在 c3.js 条形图上

JSON Data doesn't show on c3.js bar chart

json

c3.js