1

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);

ありがとう。

4

2 に答える 2

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);
于 2015-02-10T20:00:43.260 に答える
0

この例では Y 軸のスケールが大きく変化するため (値が 50% 低下)、おそらくaxis: { y: { min: 0 }, y: { max: 2 } }散布点の移動を確認するために設定する必要があります。この jsfiddleを試して、その変更が希望どおりになるかどうかを確認してください。

chart.flowX 軸の値を変更してチャート データをロードおよびリロードすると、X 軸の値は更新されますが、chart.load({ ... })それらは同じままです。グラフにデータを適切に流すには、X 軸の値を初期化するためにもう少し作業が必要です (フロー APIの例を参照)。

編集：

ご説明いただきありがとうございます。作業コードで質問に答えることはできませんが、問題に関連するC3.js の github #865 の問題を参照してください。

flow適切なグラフを作成するために、データに対して別のアプローチを使用して回避することを検討することをお勧めします。

于 2015-01-07T15:18:24.323 に答える