非商用
$0
PolyForm Noncommercial 1.0.0 の対象となる非商用プロジェクトは無料です。
AI、オブザーバビリティ、産業 IoT、金融市場向けの高性能コンポーネント
触れることをおすすめします。ホイール、ドラッグ、ピンチで作品を動かしてください。 スマートフォンやタブレットでもお試しください。数百万の値を文字どおり指先で操作できます。
- RUNTIME GZIP · LINE 63 KB · STOCK 55 KB
- 目標 60 FPS
- WORKER-FIRST
- NODE · BUN · DENO
ホイールまたはピンチでズーム。ドラッグで範囲を確認。ダブルクリックでリセット。 左右の矢印キーで移動、プラスとマイナスでズーム、Home キーでリセットできます。
ケイパビリティ・フィールド
小さく収まらないデータのために。
コンパクトな TypeScript エンジンが Worker と画面に応じた詳細度を使い、重要な山・欠損・傾向を隠さずに大規模データの操作性を保ちます。
- CANVAS2D / WEBGL 不使用
- LINE + STOCK
- WORKER / MAIN / SSR
- 5 FRAMEWORK アダプター
- 目標 60 FPS
数百万点でも、操作は軽快に。
段階的なスクリーンスペース描画パイプラインにより、対応する最新ハードウェア上で数百万点のパンとズームを滑らかに保つ設計です。
数百万値の例を実行 - WORKER-FIRST
重い処理を UI から分離。
ブラウザが対応している場合、Web Worker がチャートの詳細を準備し、UI のメインスレッド外で描画します。必要な場合は同じレンダラーがメインスレッドへ切り替わります。
Worker-first の FeederBW を見る - LOD · 詳細度
画面で使える詳細だけを表示。
LOD は大規模データを画面サイズに合う表示へ自動変換します。ズームすると詳細が増え、実際の山・谷・欠損は保たれます。
1,000万件の神経サンプルを確認 - 高度なジェスチャー
指先でビッグデータを動かす。
マウス、トラックパッド、ホイール、ドラッグ、ピンチ、タッチ、キーボードで、PC・タブレット・スマートフォンの縦横どちらでも大きな範囲を直感的に移動できます。
アクセラレータ障害を調べる - RUNTIME GZIP · LINE 63 KB · STOCK 55 KB
使うチャートだけを組み込む。
Line と Stock は個別のエントリポイントです。クリーンな初期 Worker モード読み込みはそれぞれ約 63 kB と 55 kB（gzip）で、ブラウザ API、必要な Core ランタイム、生成された静的チャンク、描画 Worker を含みます。アプリケーションコードとチャートデータは含まれず、URL オーバーレイのデコーダーとメインスレッドのフォールバックは必要な場合にのみ読み込まれます。Core、Line、Stock にはサードパーティーの実行時依存関係もありません。
Line と Stock の例を見る - NODE · BUN · DENO
ブラウザーの外でも描画。
同じ TypeScript レンダラーが、指定された Canvas2D バックエンドで静的な Line／Stock チャートを生成します。実際の PNG 出力を Node.js 22.22.3、Bun 1.3.14、Deno 2.9.3 で検証しています。
サーバーレンダリングの例を見る
展示アクセス
すべてのモダンブラウザに、最前列を。
制作環境のワークステーションから片手のスマートフォンまで、Sixtyfold はいつものブラウザで動きます。同じ Canvas2D エンジンとレスポンシブ操作を、ネイティブラッパーなしで各プラットフォームに届けます。
| ブラウザ | エンジン | デスクトップ | タブレット | モバイル |
|---|---|---|---|---|
| Chrome | Blink | 対応 | 対応 | 対応 |
| Safari | WebKit | 対応 | 対応 | 対応 |
| Firefox | Gecko | 対応 | 対応 | 対応 |
| Edge | Blink | 対応 | 対応 | 対応 |
| Samsung Internet | Blink | 提供なし | 対応 | 対応 |
| その他の ChromiumBrave · Opera · Arc · Vivaldi | Blink | 対応 | 対応 | 対応 |
FRAMEWORK アダプター
いつものフレームワーク。同じチャートエンジン。
軽量で型付けされたアダプターが、転送可能なデータ、Worker のクリーンアップ、SSR 対応ホスト、チャートへの直接アクセスを保ちながら、各フレームワーク固有のライフサイクルを提供します。
フレームワーク連携を比較- Line + StockReact
@sixtyfold/react - Line + StockVue
@sixtyfold/vue - Line + StockAngular
@sixtyfold/angular - Line + StockSvelte
@sixtyfold/svelte - Line + StockSolidJS
@sixtyfold/solid
エージェント・インターフェース
コーディングエージェントが、本物の API を読めます。
ローカルの Sixtyfold Model Context Protocol（MCP）サーバーを接続すると、インストール済みバージョンに合うパッケージ、正確な TypeScript シンボル、検証済みの実装例、オプション検査を利用できます。チャートのバンドルサイズは増えません。
@sixtyfold/mcp を接続ローカル / バージョン一致
一度だけ接続
codex mcp add sixtyfold -- npx -y @sixtyfold/mcp@next- インストール済み API
- 検証済みレシピ
- オプション検査