60FOLDCOMPONENTS

共有チャートオプション

ラインチャートとストックチャートの両方で利用可能なオプションとランタイム制御。

LineChartOptions および StockChartOptions は同じ操作、軸、ラベル、オーバーレイ、ビューポート、およびレンダリング制御を含みます。ベースチャートを構築したり内部レンダリングエンジンをインポートしたりする必要はありません。

正確なフィールドについては Line options] または Stock options] を参照してください。共有ランタイムメソッドは LineChart] および StockChart] 上に直接表示されます。

構築グループ

レンダラーとインタラクション

  • renderModeはauto、worker、またはmainを選択します。実際の結果はgetRenderMode()で読み取ります。
  • rendererInitializationTimeoutはミリ秒単位でレンダラーの起動時間を制限します。既定は15秒で、構築時にカウントを開始し、ウォッチドッグを無効にするには0に設定できます。
  • interactive: false はホバー情報を保持したままパン、ズーム、ピンチ、選択を無効にします。
  • minViewportRange はXデータ単位でのズームインを制限します。
  • yDomain: { min, max } はズーム、詳細度（LOD）変更、ストリーミング更新にわたりYドメインの片側または両側を固定します。省略された端は自動スケーリングされます。
  • wheelZoomSpeed、wheelZoomDirection、keyboardZoomSpeed、およびkeyboardPanSpeedはナビゲーションを調整します。
  • keyboardActivation はフォーカスベースまたはホバーベースのキーボード操作を選択します。
  • keyboardAnnouncements はキーボードによるパン、ズーム、リセット、選択キャンセル後に発行されるポライト（polite）ステータスメッセージをローカライズします。オプションの viewport テンプレートは {startPercent}、{endPercent}、{spanPercent} を受け取ります。ホストが同等のフィードバックを提供する場合は false に設定してください。
  • animated はデータの開示およびビューポート/軸の遷移を制御します。省略した場合、prefers-reduced-motion: reduce によりアニメーションが無効になり、チャートがマウントされたままの間その設定変更が監視されます。明示的な true または false が優先されます。

Canvas のコンテンツ

grid、axis、chartBackground、rangeSelector、tooltip、crosshairStyle、selection、labels、overlay、padding、およびtextDirectionはラインチャートと株価チャートで同じ方法で動作します。

チャートのタイポグラフィのデフォルトはエクスポートされたDEFAULT_CHART_FONT_FAMILYで、SFMonoを優先するインストゥルメントスタックです。サーフェスごとのfamilyフィールドが引き続き優先されます。

表示のスケールを各新しい極値に追従させるのではなく維持したいライブ表示には、完全に固定されたドメインを使用してください:

const chart = new LineChart(canvas, {
  yDomain: { min: 0, max: 100 },
});

yDomainはデフォルトで無効です。これはラインチャートと株価チャートで共有され、Worker、メインスレッド、およびSSRレンダリングに一貫して適用されます。

ビューポート操作

const current = chart.getViewport();

chart.setViewport(
  { xMin: current.xMin + 60_000, xMax: current.xMax - 60_000 },
  { animated: true },
);

chart.reset({ animated: true });

省略されたビューポート境界は現在の値を保持します。範囲は完全なデータ範囲とチャートのminViewportRangeに対して正規化されます。

ランタイムでの表示

構築時にのみ設定できる動作と、実行時に変更可能な外観は意図的に分離されています。getOptions() は正規化済みの完全なスナップショットを返し、getAppearance() は実行時に安全に更新できるフィールドだけを返します。どちらも DeepReadonly スナップショットとして型付けされ、ネストしたプレーンオブジェクトと配列はコピーされます。返された値を直接変更せず、ランタイムメソッドを通じて変更を適用してください。

chart.updateAppearance({
  chartBackground: "#081018",
  grid: { color: "rgba(130, 180, 220, 0.16)" },
  axis: { bottom: { labelFont: { color: "#a9bac9" } } },
});

パッチは現在の表示にマージされます。setLabels()と非同期のsetOverlay()は同じ状態に対する利便性の高いメソッドです。

1つのユーザー操作で複数のプロパティが更新される場合は、同期的な変更をバッチ処理してください:

chart.batch(() => {
  chart.updateAppearance({ grid: { color: "#26384a" } });
  chart.setViewport({ xMin, xMax });
});

awaitをbatchの内部で実行しないでください；コールバックが返る前に行われた同期呼び出しのみが合流されます。

ツールチップ

組み込みツールチップはCanvas2Dでレンダリングされます。tooltip.onRenderはメインスレッド上で実行され、タイトルと行を置き換え可能です。ポインタ移動で頻繁に呼ばれる可能性があるため高速に保ってください。tooltip.onLeaveはアプリケーション状態をクリアするのに適しています。

大きな数値のX値には明示的にtitleFormatを使用してください。自動検出は概ね10億以上の値を時間のようなものとして扱います。

オーバーレイ

オーバーレイは、チャート領域またはキャンバス全体に対して比率またはCSSピクセル座標でテキスト、矩形、円、線、画像をサポートします。文字列画像ソースは非同期にフェッチおよびデコードされます。setOverlay()をawaitし、リモート画像用にCORSを設定してください。

呼び出し元が提供した ImageBitmap ハンドルは呼び出し元が所有したままです。Worker およびメインスレッドのレンダリングはそれらを構造化クローンして、レンダラーが所有するクローンのみを閉じます。構築時のバックグラウンドやイーガー専用オーバーレイは initialize() が完了した後に閉じられてよいです。構築時のオーバーレイが呼び出し元のビットマップと URL または別の非同期に解決されるソースを混在させる場合は、オーバーレイが置換または破棄されるまでハンドルを開いたままにするか、初期化後に閉じる前に setOverlay() を呼び出して await してください。

ランタイムのバックグラウンドおよびイーガー専用オーバーレイは、初期化が保留中であっても updateAppearance()（またはそれを包含する batch()） が戻った後に閉じられてよいです。混在または遅延ランタイムオーバーレイの場合は、setOverlay() を直接呼び出し、その Promise が解決されるまで呼び出し元のハンドルを開いたままにしてください。URL のフェッチ／デコード実装はオンデマンドの別チャンクとして配信され、初期のブラウザランタイムの一部ではありません。

一部のソースが失敗した場合、setOverlay() は成功した項目をインストールし、ChartOverlayError で拒否します。要求されたすべての項目が失敗した場合は、以前にレンダリングされたオーバーレイが引き続きインストールされたままになります。解決およびレンダラー配信の失敗は setOverlayErrorCallback() とフレームワークアダプターのエラーフックにも到達します。保留中の更新を上書きすることやチャートを破棄することは通常のキャンセルであり：保留中の Promise はインストールせずに解決し、オーバーレイエラーは報告されません。

アクセシビリティ

Sixtyfold はホストが既にフォールバックのセマンティクスを提供していない場合にのみフォールバックを追加します。インタラクティブなチャートには role="application"、tabindex="0"、およびフォールバックのアクセシブル名が付与されます。表示のみのチャート（interactive: false）には role="img" が付与され、タブ順には追加されません。既存の role、tabindex、aria-label、および aria-labelledby 属性は保持されます。

アプリケーション固有の名前と説明を優先してください：

<canvas
  aria-label="Hourly load for feeder 12"
  aria-describedby="feeder-12-summary"
></canvas>
<p id="feeder-12-summary">Latest load is 73 kW; the daily peak was 96 kW.</p>

インタラクティブなチャートの場合、隣接するテキスト要約またはデータテーブルの代替を提供し、aria-describedby で参照してください。キーボード操作可能なチャートに role="img" を強制しないでください。色だけでシリーズを識別することは避けてください。

キーボードによるパン、ズーム、リセット、および選択のキャンセルは、非表示の polite ライブリージョンを通じて通知されます。これらのメッセージは keyboardAnnouncements でローカライズし、後で setKeyboardAnnouncements() で更新するか、周囲のアプリケーションが同等のフィードバックを提供する場合は無効にしてください。オプションのビューポートテンプレートは、完全なデータ範囲に対する開始、終了、および範囲のパーセンテージを表示できます。アニメーションするパン、ズーム、リセットのメッセージはレンダラーによって確定したビューポートの安定を待つため、中間のアニメーションフレームは決してアナウンスされません。

Sixtyfold はすべてのストリーミングサンプルや再描画を aria-live を通じて逐一通知しません。高頻度の通知はスクリーンリーダーでチャートを使い物にならなくするためです。接続断や閾値超過などアプリケーションにとって意味のあるイベントがある場合は、アプリケーション側で所有しスロットルしたライブリージョンを介してそれらを公開してください.