データ可視化・ダッシュボード
リアルタイム風スパークライン
1秒ごとに新しい値が追加され、折れ線グラフが左に流れる。現在値と変化方向をリアルタイムで表示。
プレビュー
自動再生
操作自動で再生されます。
コード（コピーして使えます）
<div class="rs-wrap">
<div class="rs-header">
<span class="rs-label">CPU 使用率</span>
<span class="rs-current">
<span class="rs-val">--</span><span class="rs-unit">%</span>
<span class="rs-arrow" aria-hidden="true">→</span>
</span>
</div>
<svg class="rs-svg" viewBox="0 0 220 90" preserveAspectRatio="none" aria-hidden="true">
<defs>
<linearGradient id="rs-grad" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#2b50c7" stop-opacity="0.25"/>
<stop offset="100%" stop-color="#2b50c7" stop-opacity="0"/>
</linearGradient>
</defs>
<path class="rs-area" d=""/>
<polyline class="rs-line" points=""/>
</svg>
<div class="rs-footer">
<span>20秒前</span><span>現在</span>
</div>
</div>