c3.js中具有多个XY折线图的大量或未知数据阵列

Question

I've been using c3.js for some time now, but recently I stumbled across a problem. I'm using the Multiple XY Line Chart feature and my data set is huge. Is there a way to do the data-axis binding (the xs part) automatically instead of hard coding it?

var chart = c3.generate({
        data: {
            xs: {
                'data1': 'x1',
                'data2': 'x2',
                .
                .
                .
                'datan': 'xn',
            },
            columns: [
                ['x1', 10, 30, 45, 50, 70, 100],
                ['x2', 30, 50, 75, 100, 120],
                .
                .
                .
                ['xn', 45, 60, 80, 120, 130],
                ['data1', 30, 200, 100, 400, 150, 250],
                ['data2', 20, 180, 240, 100, 190],
                .
                .
                .
                ['datan', 10, 150, 220, 160, 300]
            ]
        }
    });

Answer 1

You just need to build a function that matches the syntax of your data series titles to the relevant x series

Assuming all the x1 / data1 etc stuff is in an object (allmydata) before you generate the chart you could do:

var allmydata = [
                ['x1', 10, 30, 45, 50, 70, 100],
                ['x2', 30, 50, 75, 100, 120],
                ['xn', 45, 60, 80, 120, 130],
                ['data1', 30, 200, 100, 400, 150, 250],
                ['data2', 20, 180, 240, 100, 190],
                ['datan', 10, 150, 220, 160, 300]
    ];

var match = function (dataStr) {
    return dataStr.startsWith("data") ? dataStr.replace ("data", "x") : undefined;
};

var xs = {};
allmydata.forEach (function (series) {
    var seriesName = series[0];
    var xsName = match (seriesName);
    if (xsName) {
        xs[seriesName] = xsName;
    }
});

var chart = c3.generate({
        data: {
            xs: xs,
            columns: allmydata
        }
});

http://jsfiddle.net/0f38ffsy/1/