9

人力車を使用して、ライブ更新の時系列グラフを作成しています。

ここにデモがあります: http://abhshkdz.github.io/icuvisualanalytics/prototypes/rickshaw.html

データは csv 形式 (時間、値) であり、これは視覚化のためのコア JavaScript です。

var count = 0, index=0;

var margin  =   {top: 10, right: 10, bottom: 10, left: 10},
    width   =   window.innerWidth - margin.right - margin.left - 100,
    height  =   window.innerHeight - margin.top - margin.bottom - 100;

var graph = new Rickshaw.Graph( {
    element: document.querySelector("#chart"),
    width: width,
    height: height,
    renderer: 'line',
    min: -300,
    max: 500,
    preserve: true,
    series: new Rickshaw.Series.FixedDuration(
        [
            {
                name: 'ECG',
                color: palette.color()
            }
        ], 
        undefined,
        {
            timeInterval: 12.5,
            maxDataPoints: 400,
            timeBase: data[index][count].x
        })
    })

var x_axis = new Rickshaw.Graph.Axis.Time( { graph: graph } );

var y_axis = new Rickshaw.Graph.Axis.Y( {
        graph: graph,
        orientation: 'left',
        tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
        element: document.getElementById('y_axis')
} );

var hoverDetail = new Rickshaw.Graph.HoverDetail( {
    graph: graph
} );

graph.render();

setInterval(function () {

    if (count == 2397) {
        count = 0;
        index++;
    }
    var d = {'ECG': data[index][count+=3].y};
    graph.series.addData(d);
    graph.render();

}, 12.5);

現在、アルゴリズムによって生成された別のデータセットがあります。そのデータも csv 形式 (時刻、値) です。基本的に、このプロットのピークを見つけます。そのデータを使用して、このビジュアライゼーション自体にそれらのポイントをマークしたいと思います。

私が見た限りでは、Rickshaw は異なるレンダラーを使用する複数のシリーズをネイティブにサポートしていません (両方が線である必要があるか、両方が散布図である必要があります)。

では、これについてどうすればよいですか?

4

1 に答える 1