带有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'
}})