问题
I use the C3.js chart library, great work!
But when I dynamically generate JSON data and load on the chart, the bars doesn’t show up.
See the snippet code below:
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>
回答1:
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'
},
});
please see this example here http://jsfiddle.net/2nf9a7x4/
来源:https://stackoverflow.com/questions/41277178/json-data-doesnt-show-on-c3-js-bar-chart