帶有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 軸，數據為 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'
}})