来自csv的c3 js饼图
来自csv的c3 js饼图
提问于 2020-07-10 22:41:34
我正在尝试使用C3.js从CSV加载数据来显示饼图。我能够让图表在手动输入时显示我的数据。但是我不知道如何从CSV中正确加载图表。有没有办法告诉饼图，第一列是标签，第二列是要从CSV显示的数据？
这是我所处的位置：
var summary = c3.generate({
bindto: '#chart',
data: {
columns: [
['0-1',42.11],
['1-3',33.80],
['3-5',6.94],
['5-10',3.99],
['10-2',10.05],
['>20',3.11]
],
type: 'pie'
},
size: {
width: 500,
height: 500
}
})
setTimeout(() => {
c3.generate({
bindto: '#chart',
data: {
url: 'data.csv',
type: 'pie'
},
size: {
width: 500,
height: 500
}
});
}, 1000)我的CSV
Name,Percentage
0-1,42.11
1-3,33.80
3-5,6.94
5-10,3.99
10-20,10.05
>20,3.11图表应该是什么样子：https://i.stack.imgur.com/koymo.png
如何从CSV加载：https://i.stack.imgur.com/bFmLc.png
回答 1
Stack Overflow用户
发布于 2020-07-11 00:07:59
我想通了。我使用Papaparse将CVS数据解析为正确的格式。以下是如何使用C3.js显示CSV中的饼图(还必须将列更改为行)：
function parseData(createGraph) {
Papa.parse("data.csv", {
download: true,
complete: function(results) {
createGraph(results.data);
}
});
}
function createGraph(data) {
var name = [];
var percentage = [];
for (var i = 0; i < data.length; i++) {
name.push(data[i][0]);
percentage.push(data[i][1])
}
console.log(name);
console.log(percentage);
var summary = c3.generate({
bindto: '#chart',
data: {
rows: [
name,
percentage
],
type: 'pie'
},
legend: {
show:false
}
});
}
parseData(createGraph);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62836701
复制相关文章
相似问题
腾讯云开发者
