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

Question

我使用 c3.js 一段时间了，但最近我偶然发现了一个问题。我正在使用多 XY 折线图功能，并且我的数据集非常大。有没有办法自动进行数据轴绑定(bind)(xs 部分)而不是硬编码？

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

您只需构建一个函数，将数据系列标题的语法与相关 x 系列相匹配

假设在生成图表之前所有 x1/data1 等内容都在一个对象(allmydata)中:

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/