带有 json 数据的 c3js 多 xy 折线图

Question

我想使用 JSON 数据格式在 c3js 中绘制多线图。

我找到了一个这样的例子

var chart = c3.generate({
data: {
    json: [
        {x: 1, data1: 0},
        {x: 2, data1: 1},
        {x: 3, data1: 2},
        {x: 4, data1: 3},
        {x: 11, data1: 2},
        {x: 12, data1: 0},
        {x: 13, data1: 0},
        {x2: 5, data2: 2},
        {x2: 6, data2: 3},
        {x2: 7, data2: 0},
        {x2: 8, data2: 2}
    ],
    keys: {
        xs: {
            data1: 'x',
            data2: 'x2',
        },
        value: ['data1', 'data2']
    },
    types: {
        'data1': 'line',
        'data2': 'spline'
    }
},
});

但它不能正常工作。 x为x轴，data为y轴。

所以我需要混合使用这两个功能： https://c3js.org/samples/data_json.html https://c3js.org/samples/simple_xy_multiple.html

我错过了什么？

Answer 1

这是一个悬而未决的问题（https://github.com/c3js/c3/issues/1082）。如果你在 github 上，你可以对这个问题竖起大拇指来推动它。

所以您只需使用列格式来呈现您的数据。

但是，如果您想将数据原封不动地保存在 json 中，我编写了一个名为 jsonToColsForXS 的简单实用函数，可将它们转换为列格式。

var jsonToColsForXS = function(data) {
    if(
        data &&
        'data' in data &&
        'json' in data.data &&
        'keys' in data.data &&
        'xs' in data.data.keys
    ) {

        data.data.columns = [];
        var columnsByKey = {};
        for(var key in data.data.keys.xs) {
            var key1 = key;
            var key2 = data.data.keys.xs[key];
            var key1_col = [key1];
            var key2_col = [key2];
            columnsByKey[key1] = key1_col;
            columnsByKey[key2] = key2_col;
            data.data.columns.push(key1_col, key2_col);
        }
        data.data.json.forEach(function(dataPoint) {
            for(var key in dataPoint) {
                if(key in columnsByKey) {
                    columnsByKey[key].push(dataPoint[key]);
                }
            }
        })
    }
    delete data.data.json;
    data.data.xs = data.data.keys.xs;
    delete data.data.keys;
    return data;
}

var chart = c3.generate(jsonToColsForXS({
data: {
    json: [
        {x: 1, data1: 0},
        {x: 2, data1: 1},
        {x: 3, data1: 2},
        {x: 4, data1: 3},
        {x: 11, data1: 2},
        {x: 12, data1: 0},
        {x: 13, data1: 0},
        {x2: 5, data2: 2},
        {x2: 6, data2: 3},
        {x2: 7, data2: 0},
        {x2: 8, data2: 2}
    ],
    keys: {
        xs: {
            'data1': 'x',
            'data2': 'x2',
        },
        value: ['data1', 'data2']
    },
    types: {
        'data1': 'line',
        'data2': 'spline'
    }
},
}));

Answer 2

这行得通，但是当我们尝试加载图表时，它失败了即

chart.load({
json: [
    {x: 1, data1: 0},
    {x: 2, data1: 1},
    {x: 3, data1: 2},
    {x: 4, data1: 3},
    {x: 11, data1: 2},
    {x: 12, data1: 0},
    {x: 13, data1: 0},
    {x2: 5, data2: 2},
    {x2: 6, data2: 3},
    {x2: 7, data2: 0},
    {x2: 8, data2: 2}
],
keys: {
    xs: {
        'data1': 'x',
        'data2': 'x2',
    },
    value: ['data1', 'data2']
},
types: {
    'data1': 'line',
    'data2': 'spline'
}})

带有 json 数据的 c3js 多 xy 折线图

c3js multiple xy line chart with json data

javascript

reactjs

c3.js