5

次のように、人力車を使用して、ランダムなデータでライブ更新を示す素敵なプレースホルダー グラフを作成しようとしています。

var series = [[], []];
var random = new Rickshaw.Fixtures.RandomData(150);

for(var i = 0; i < 80; i++) {
    random.addData(series);
}

var throughput = new Rickshaw.Graph( {
    element: document.querySelector("#throughput_chart"),
    width: "300",
    height: "200",
    renderer: "line",
    series: [{
        color: "gold",
        data: series[0]
    }]
});

var alerts = new Rickshaw.Graph( {
    element: document.querySelector("#alerts_chart"),
    width: "300",
    height: "200",
    renderer: "line",
    series: [{
        color: "red",
        data: series[1]
    }]
});

throughput.render();
alerts.render();

setInterval(function() {
    random.addData(series);
    throughput.update();
    alerts.update();
    /* XXX: This causes the data to stop drawing properly
    series.forEach(function(s) {
        s.shift();
    });
    */
}, 1000);

コメントアウトされた部分を除いて、これは機能します。そのまま、データを追加し続けます。つまり、グラフはますます混雑します。同じ数のデータポイントでグラフを維持するために、最後に新しい項目を追加するたびに最初の項目を削除できるようにしたいのですが、そのコードを入れるとすぐにグラフが表示されなくなりますconsole.log配列がまだデータでいっぱいであることを示していても、任意のデータを表示します。

一度に一定数のデータポイントのみを表示するようにするにはどうすればよいですか?

4

2 に答える 2

11

Rickshaw のドキュメント ( http://code.shutterstock.com/rickshaw/examples/fixed.html )の例のリードに従って、必要なものに似たものをまとめました。

JSフィドル

var tv = 50;

var throughput = new Rickshaw.Graph({
    element: document.querySelector("#throughput_chart"),
    width: "300",
    height: "200",
    renderer: "line",
    series: new Rickshaw.Series.FixedDuration([{
        name: 'one', color: 'gold'
    }], undefined, {
        timeInterval: tv,
        maxDataPoints: 100,
        timeBase: new Date().getTime() / 1000
    })
});

var alerts = new Rickshaw.Graph({
    element: document.querySelector("#alerts_chart"),
    width: "300",
    height: "200",
    renderer: "line",
    series: new Rickshaw.Series.FixedDuration([{
        name: 'one', color: 'red'
    }], undefined, {
        timeInterval: tv,
        maxDataPoints: 100,
        timeBase: new Date().getTime() / 1000
    })
});

for(var i = 0; i < 100; i++){
    addRandomData(throughput);
    addRandomData(alerts);
}

throughput.render();
alerts.render();

setInterval(function () {

    addRandomData(throughput);
    addRandomData(alerts);
    throughput.render();
    alerts.render();

}, tv);

function addRandomData(chart) {
    var data = {
        one: Math.floor(Math.random() * 40) + 120
    };
    chart.series.addData(data);
}
于 2013-06-05T17:46:39.880 に答える
2

私が知る限り、FixedDuration クラスは RandomData では機能しません。私がしていることは、一連の配列の最初のデータポイントを削除して、グラフが混雑しないようにし、データが追加されるにつれて左側にストリーミングすることです。

setInterval( function() {
    random.addData(seriesData);
    for (i=0; i < seriesData.length; i++){
        var series0 = seriesData[i][seriesData[i].length-1];
        seriesData[i].shift();
        seriesData[i].push(series0);
    }
    graph.update();
}, 3000 );

最後に追加されたデータポイントを配列の最後に戻す必要がある理由は完全にはわかりません ( series[x].push(seriesX)) が、それ以外の場合は機能しません。最後のデータポイントを 2 倍にする効果はなく、1 つだけ追加されます。これがうまくいくことを願っています！

于 2013-06-15T20:23:47.593 に答える