どんなときに使うか

売上・利用者数・アクセス数のように、時間にそって増減する数値を動画で見せたいときに向いています。表計算ソフトのグラフを画面録画する代わりに、線が伸びていく様子をそのまま動画として書き出せます。数値は timeline（期間の並び）と series（系列名・色・値）の2つで指定します。

値が分からない期間は values の該当位置を null にしてください。values の件数は timeline と同じである必要があり、違うときは反映時にメッセージが出ます。書いたJSONは「JSON保存」でファイルに落とせるので、次に作るときは「JSON読込」から読み戻せます。

動画の長さの決まり方

動画時間は「小→大の導入秒数」＋「線が伸びる秒数」＋「終了静止秒」の合計です。再生位置のバーはこの合計に対する位置を示します。再生速度（0.25倍から3倍）は画面で確認するためのもので、録画される動画の長さは変わりません。

縦軸の動かし方

JSONの yAxis.mode で3通りから選べます。grow は線が伸びるのに合わせて縦軸の上限が追従し、数字が伸びていく印象が強く出ます。fixed は max で固定、auto は全データから決めた固定値です。startMax は grow の開始時の上限、headroom は上端に取る余白、smooth は追従の滑らかさです。

見た目の調整

グリッド・凡例・先端の値ラベル・実データ点は個別に消せます。文字が小さいと感じたら「タイトル」「軸・年表示」「線の先端数値」「大きな現在値」のスライダーを上げてください。ネオングロー・先端トレイル・パーティクルは見栄えのための演出なので、落ち着いた図にしたいときは切ってください。系列が多いときは「先頭だけ表示」で1本ずつ確認できます。

録画されるのはキャンバスの中だけです。設定欄や操作ボタンは動画に入りません。セーフエリアガイドは画面で確認するための表示で、録画には含まれません。録画には MediaRecorder と captureStream を使うため、Chrome / Edge の最新版を推奨します。