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

c3js带有JSON数据的多个xy折线图

2 个答案: