c3.js 中的增量散点图

Question

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

在初始化绘图时给出了第一批，并且显示正常。但是当我使用 flow 更新情节时，较早的点会被删除。此外，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);

Answer 2

因为在您的示例中 Y 轴的比例变化很大（值下降了 50%），您可能需要设置 axis: { y: { min: 0 }, y: { max: 2 } } 才能看到散点移动。试试this jsfiddle 看看该更改是否符合您的要求。

当您使用chart.flow 时，X 轴值会更新，如果您将其更改为使用chart.load({ ... }) 加载和重新加载图表数据，它们将保持不变。要使图表正确地流动数据，需要做更多的工作来初始化 X 轴值（请参阅flow API example），但从您的简单示例中并不清楚这就是您想要做的。

---

编辑：

感谢您的澄清。我无法用工作代码回答您的问题，但请参阅与您的问题相关的github #865 issue for C3.js。

您可能需要考虑对数据使用不同的方法并避免使用flow 以构建合适的图表。