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时，如果您更改加载并使用chart.load({ ... })加载和重新加载图表数据，则会更新X轴值，它们将保持不变。为了使图表正确地流动数据，需要更多的工作来初始化X轴值（参见flow API example），但是从您的简单示例中可以看出这是您想要做的事情。

修改：

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

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

c3.js中的增量散点图

2 个答案: