我使用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>
答案 0 :(得分: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/