c3 js p ie график из csv - PullRequest
Новая
       36

c3 js p ie график из csv

0 голосов
/ 10 июля 2020

Я пытаюсь отобразить диаграмму ap ie с помощью C3. js загрузка данных из CSV. Я могу заставить диаграмму отображать мои данные, когда они вводятся вручную. Но я не могу понять, как правильно загрузить диаграмму из CSV. Есть ли способ сообщить диаграмме p ie, что первый столбец является меткой, а второй столбец - данными, которые должны отображаться из 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 Ответ

0 голосов
/ 10 июля 2020

Разобрался. Я использовал Papaparse, чтобы преобразовать данные CVS в правильный формат. Вот как отобразить диаграмму ap ie из CSV с использованием C3. js (также пришлось изменить столбцы на строки): 

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);
...