ワーカー、メインスレッド、およびレンダリング

Sixtyfoldは1つのTypeScriptレンダリング設計を持ち、ホストは3つ：OffscreenCanvas Worker、非同期のメインスレッドアダプタ、およびサーバーサイドレンダリングのエントリーポイントです。グラフィックスバックエンドはCanvas2Dのみです。

レンダラーの選択はLineChartOptionsおよびStockChartOptionsの一部です。解決されたモードはchart.getRenderMode()から利用可能です。

自動選択

renderMode: "auto"はブラウザがWorker、OffscreenCanvas、およびCanvasの転送をサポートしている場合にWorkerを優先します。これらの機能が欠けているか、または厳しいContent Security PolicyによってWorkerの構築が同期的にブロックされる場合はメインスレッドにフォールバックします。

const chart = new LineChart(canvas, { renderMode: "auto" });
await chart.initialize();

console.log(chart.getRenderMode()); // "worker" or "main"

renderMode: "worker"は約束ではなく優先を示すものです；Workerレンダリングを開始できない場合は引き続きフォールバックします。テレメトリやサポート情報にはgetRenderMode()を使用してください。

Workerモード

Workerモードではキャンバスと大容量の型付き配列バッファの制御を移譲します。階層構築、範囲選択、レイアウト、描画がブラウザのUIタスクを占有しないため、インタラクティブな数百万点規模のチャートでは推奨される経路です。

カスタムツールチップ描画などのメインスレッドのコールバックは、Worker状態への直接アクセスではなく、コンパクトなレンダラーメッセージを受け取ります。コールバックは決定論的かつ迅速に保ってください。

メインスレッドモード

テスト環境、転送可能なキャンバスを持たないブラウザ、Workerを禁止する堅牢なホスト、またはUIスレッドの分離よりも統合の簡潔さが重要な小規模な静的チャートにはrenderMode: "main"を使用してください。

メインスレッドアダプターはレンダラーのメッセージを意図的に非同期で配信します。setDataを呼び出したからといって最初のフレームが同期的に完了したと仮定しないでください。フレーム完了が重要な場合は統計情報やアプリケーションレベルの準備完了UIを使用してください。

リリース検査では、LineおよびStockをChromium、Firefox、およびWebKitの両方でメインスレッド経路とプロダクションデフォルトのauto経路を通じて実行します。能力のあるエンジンでは、autoはOffscreenCanvas Workerに解決されます。強制Worker契約はChromiumでも実行されます。これは互換性を検証するものであり、デバイスに依存しないフレームレート保証ではありません。

サイズ指定とDPR

キャンバスのCSS幅と高さはレイアウトを通じて設定してください。Sixtyfold Chartsは要素サイズとデバイスピクセル比の変化を監視し、その後バックストアとレンダラーのレイアウトを更新します。resize()は、ホストが即時に観測できない方法でレイアウトを変更した場合でも利用可能なままです。

レスポンシブなチャートでは、canvas のみの width と height 属性を設定することは避けてください。これらの属性はバッキングストアの値であり、Sixtyfold Charts の公開されているサイズとスタイリングのフィールドは CSS ピクセルを使用します。

コンテンツセキュリティポリシー

本番環境で制限の厳しいポリシーは通常、次を必要とします:

default-src 'self';
script-src 'self';
worker-src 'self';
img-src 'self' data: blob:;
connect-src 'self';

この例はそのままコピーせず、アプリケーションに合わせて調整してください。リモートのオーバーレイ画像は、img-src にあるオリジンと互換性のある CORS レスポンスヘッダーを要求します。

可視性とクリーンアップ

ブラウザのチャートは非表示時に作業を一時停止するか不要な処理を回避します。オプションのSafariキープアライブ間隔はデフォルトで無効であり、対象のSafariバージョンでリソース回収を再現した後にのみ有効化してください。

キャンバスを永久に破棄する前に常にdestroy()を呼び出してください。シングルページアプリケーションでは、フレームワークのクリーンアップフックが適切な場所です。

フレームワークの準備完了コールバックは初期化と初期プロップの正常な設定を確認するものであり、描画されたキャンバスフレームを意味するものではありません。React 19.2+のActivityによる非表示は、実際のアンマウントまでマウントされたレンダラーとそのメモリを保持します; これはWorkerの破棄の境界ではありません。非表示のrefs、遅延コールバック、エラー復旧についてはadapter lifecycle contractを参照してください。