Question

我一直在使用c3.js一段时间了，但最近我遇到了一个问题。我正在使用多XY线图功能，我的数据集非常庞大。有没有办法自动进行数据轴绑定（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/

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

1 个答案: