Sixtyfold Charts
大規模なライン系列およびOHLCVデータセット向けのCanvas2Dチャートです。
Sixtyfold Chartsは、通常のDOMやSVGレンダリングでは扱えない大規模データセット向けのTypeScriptおよびCanvas2Dチャートライブラリです。ブラウザのチャートはサポートされている場合にWeb Workerを使用し、準備とレンダリングをUIスレッド外で行います；同じレンダラーは必要に応じてメインスレッドにフォールバックします。
複数系列のライン、ステップ、レンジ、ポイント、バー、積み上げエリアには@sixtyfold/lineを使用します。OHLCVキャンドル、出来高、インジケーター、出来高プロファイル、価格ライン、イベントマーカーには@sixtyfold/stockを使用します。
ブラウザチャートのランタイムにはサードパーティの依存関係がありません：Core、Line、StockはSixtyfoldパッケージのみを依存先とします。フレームワークアダプターはホストアプリケーションに既に存在するフレームワークを再利用し、オプションのMCP開発者ツールは別プロセスで動作しチャートバンドルに含まれることはありません。
ここから始める
- 必要なパッケージだけをインストールしてください。
- ラインチャートを作る、またはストックチャートを作る。
- バニラのTypeScriptか、フレームワークアダプターを選択してください。
- 本番データを読み込む前に、typed-array所有権契約を読んでください。
すべてのブラウザ統合は同じライフサイクルを持ちます：
const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(data);
// When the view is permanently removed:
chart.destroy();詳細度（LOD）
LODは詳細度（level of detail）を意味します。より大きなデータセットの画面サイズに合わせた自動表現であり：ラインチャートは重要な極値とギャップを保持し、ストックチャートはキャンドルを有効なOHLCV期間に結合します。ズームするとより細かい詳細が現れます。
同じ原理は3Dゲームでもお馴染みです：遠方のオブジェクトは画面がすべてのポリゴンを表示できないため簡素なモデルを使用し、カメラが近づくと詳細を増します。チャートでは表示範囲がカメラ距離に相当します—概要は数百万の区別できないサンプルの代わりに有限の要約を描画し、ズームインするとより細かなデータを復元します。デフォルト設定はほとんどのアプリケーションに適しています。
さらに進む
- 表示設定を変更する前に、パフォーマンスガイドとライブの詳細度キャリブレーションを使用してください。
- Workerとメインスレッドのレンダリングのどちらかを選ぶか、サーバーサイドレンダリングで静的出力を生成してください。
- コーディングエージェントが正確なインストール済みAPIを必要とする場合は、ローカルのModel Context Protocol (MCP)サーバーに接続してください。
- 正確なオプション、メソッド、またはデータ型が必要な場合は、Line APIまたはStock APIを開いてください。
- チャートが空白、遅い、サイズが不正、またはリソースを解放していない場合は、まずトラブルシューティングを参照してください。
プロジェクトの系譜
Sixtyfold Chartsは前身である99ff00/react-chartyの構築で得た教訓から発展しました。Sixtyfoldは単なる名称変更ではなく、新しいアーキテクチャと製品です。
研究的基盤
SixtyfoldのレンダラーとLODシステムは独自のTypeScript実装です。以下の出版物は設計に影響を与えました；リンクは系譜を示すものであり、コード継承、提携、または支持を意味するものではありません。
直接の影響
- M4: A Visualization-Oriented Time Series Data Aggregation — Uwe Jugel、Zbigniew Jerzak、Gregor Hackenbroich、Volker Markl、PVLDB（2014）。表示スケール間隔内で使用される順序付けられたfirst/minimum/maximum/last要約に影響を与えました。
- OM3: An Ordered Multi-level Min-Max Representation for Interactive Progressive Visualization of Time Series — Yunhai Wangら、PACM（2023）。任意の表示範囲クエリに対してすべての可視ソース点を再走査せずに応答するための階層の使用に影響を与えました。SixtyfoldはOM3のデータベース表現やプログレッシブプロトコルを採用していません。
- Data Point Selection for Line Chart Visualization: Methodological Assessment and Evidence-Based Guidelines — Jonas Van Der Donckt、Jeroen Van Der Donckt、Michael Rademaker、Sofie Van Hoecke（2023）。パン、ズーム、ストリーミング中の視覚的安定性の評価は、Sixtyfoldのアンカー付き量子化表示グリッドに影響を与えました。
代替案の評価
- Downsampling Time Series for Visual Representation — Sveinn Steinarsson、アイスランド大学（2013）。設計時に評価したLargest-Triangle-Three-Bucketsファミリーを紹介しました。SixtyfoldはLTTBを実装していません；製品ラインのLODは極値保持の階層的区間要約を使用します。
これらの引用は研究的影響のみを説明するものです。Sixtyfoldは再現しません 論文の本文、図、または参照実装を。出版物とコードの ライセンスはSixtyfoldのライセンスとは別個のままです。