人力車を使用して、ライブ更新の時系列グラフを作成しています。
ここにデモがあります: 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 は異なるレンダラーを使用する複数のシリーズをネイティブにサポートしていません (両方が線である必要があるか、両方が散布図である必要があります)。
では、これについてどうすればよいですか?