时间戳

首页 > 解决方案 > 来自csv的c3 js饼图

javascript - 来自csv的c3 js饼图

问题描述

我正在尝试使用 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

标签： javascriptd3.jsc3.js

解决方案

弄清楚了。我使用 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);

推荐阅读