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

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 等内容都在 object (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 折线图的大量或未知数量的数据数组

Large or unknown number of data arrays with Multiple XY Line Chart in c3.js

javascript

graph

d3.js

c3.js