JSON数据未显示在c3.js条形图上 [英] JSON Data doesn't show on c3.js bar chart

问题描述

我使用C3.js图表​​库，很棒！

I use the C3.js chart library, great work!

但是当我动态生成JSON数据并加载到图表上时，条形图不会显示。

But when I dynamically generate JSON data and load on the chart, the bars doesn’t show up.

请参见以下代码段：

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>

推荐答案

请尝试此操作并根据需要进行更改。

Please try this and change according required.

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条形图上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！