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

【问题标题】：JSON Data doesn't show on c3.js bar chartJSON 数据未显示在 c3.js 条形图上
【发布时间】：2016-12-22 06:42:17
【问题描述】：

我用的是 C3.js 图表库，干得好！

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

查看下面的sn-p代码：

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>

【问题讨论】：

问题被标记为 PHP，但您的问题中没有 PHP 代码？
我在 PHP 应用程序中编写了代码，但您是对的。我删除了标签。谢谢。

标签： json c3.js

【解决方案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/

【讨论】：

谢谢！这很有意义。