javascript - c3.js 中的增量散点图

Question

我需要使用 c3.js 在散点图中显示数据点。数据点批量到达，我想随着新点的到达逐步更新绘图。

初始化绘图时给出第一批，并且显示良好。但是当我使用流程更新绘图时，较早的点会被删除。此外，X 轴不显示正确的 X 坐标。 [编辑:添加说明] 流程结束后，点出现在 (3, 1)、(4, 1)、(5, 1)，而不是 (1.5, 1)、(2.5, 1)、(3.5, 1)如数据中所指定。]

我错过了什么吗？

JsFiddle:http://jsfiddle.net/cornea/b33usb69/

var chart = c3.generate({
    data: {
        x: 'A',
        columns: [
            ['A', 1.5, 2.5, 3.5],
            ['B', 2.0, 2.0, 2.0]
        ],
        type: 'scatter',
        types: { 'B': 'scatter' }
    },
    axis: {
        x: { label: 'A', tick: { fit: true } },
        y: { label: 'B' }
    }
});

setTimeout(function () {
    chart.flow({
        columns: [
            ['A', 1.5, 2.5, 3.5],
            ['B', 1.0, 1.0, 1.0]
        ]
    });
}, 2000);

谢谢。

Answer 1

不确定为什么要使用 .flow，这不是更适合时间序列数据吗？

难道不能使用 .load 将新数据点获取到图表上吗？

像这样:http://jsfiddle.net/b33usb69/20/

编辑:

如果你想把它放在同一个数组中，那么像这样: (代码未测试)

var a = ['A_x', 1.5, 2.5, 3.5], b = ['A', 2.0, 2.0, 2.0];

var chart = c3.generate({
    data: {
        xs: { A: 'A_x' },
        columns: [
             ['A_x', 1.5, 2.5, 3.5],
            ['A', 2.0, 2.0, 2.0]
        ],
        type: 'scatter'
    },
    axis: {
        y: { min: 0, max: 3 }
    }
});

setTimeout(function () {
    a = a.concat[1.5, 2.5, 3.5];
    b = b.concat[1.0, 1.0, 1.0];
    chart.load({
        columns: [
            a,
            b
        ]
    });
}, 2000);