来自 json 使用 c3 js 的饼图
pie chart from json using c3 js
以代码为例..
我需要生成一个有 4 个分区(site1、site2...)的饼图,每个分区对应于其各自的上传值。
在上面的代码中我无法实现这个(我指定了值:['upload'])...
我必须指定的确切值是多少?
谢谢..
chart = c3.generate({
data: {
json: [
{name: 'www.site1.com', upload: 200},
{name: 'www.site2.com', upload: 100},
{name: 'www.site3.com', upload: 300},
{name: 'www.site4.com', upload: 400},
],
keys: {
// x: 'name', // it's possible to specify 'x' when category axis
value: ['upload'],
},
type:'pie'
},
axis: {
x: {
// type: 'category'
}
}
});
饼图将每个 属性 映射到饼图扇区。您可以重新格式化 JSON,例如
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({
data: {
json: [ data ],
keys: {
value: sites,
},
type:'pie'
},
});
工作 fiddle - http://jsfiddle.net/2nf9a7x4/
以代码为例..
我需要生成一个有 4 个分区(site1、site2...)的饼图,每个分区对应于其各自的上传值。
在上面的代码中我无法实现这个(我指定了值:['upload'])...
我必须指定的确切值是多少?
谢谢..
chart = c3.generate({
data: {
json: [
{name: 'www.site1.com', upload: 200},
{name: 'www.site2.com', upload: 100},
{name: 'www.site3.com', upload: 300},
{name: 'www.site4.com', upload: 400},
],
keys: {
// x: 'name', // it's possible to specify 'x' when category axis
value: ['upload'],
},
type:'pie'
},
axis: {
x: {
// type: 'category'
}
}
});
饼图将每个 属性 映射到饼图扇区。您可以重新格式化 JSON,例如
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({
data: {
json: [ data ],
keys: {
value: sites,
},
type:'pie'
},
});
工作 fiddle - http://jsfiddle.net/2nf9a7x4/