60FOLDCOMPONENTS

フレームワークアダプター

React、Vue、Angular、Svelte、SolidJSからSixtyfold Chartsのラインおよび株価チャートを使用します。

Sixtyfoldのフレームワークパッケージは同じLineChartおよびStockChartエンジンをラップする薄いライフサイクルアダプターです。レンダリングロジックを複製したり、データを再構成したり、ランタイムテレメトリを追加したり、あらゆるチャートをアプリケーションに取り込んだりしません。

使用するエンジンとアダプターを1つインストールします。/lineまたは/stockのエントリーポイントのみをインポートしてください：

pnpm add @sixtyfold/react@next @sixtyfold/line@next
import { SixtyfoldLineChart } from "@sixtyfold/react/line";

reactをvue、angular、svelte、またはsolidに置き換えてください。株式チャートの場合は、@sixtyfold/stockをインストールし、/stockをインポートしてください。チャートエンジンはアダプターのオプショナルなピア依存関係であるため、ラインチャートをインストールしても株式チャートはインストールされません。

共有アダプター契約

すべてのアダプターはコンポーネントのマウント後にチャートを作成し、initialize()を待機し、リアクティブな入力を適用し、アンマウント時にdestroy()を呼び出します。これによりチャートWorkerが終了し、オブザーバー、リスナー、および大きなバッファ参照が解放されます。SSR中はコンポーネントはキャンバスホストのみを出力するため、サーバー側でチャートピクセルを描画する必要がある場合は@sixtyfold/ssrを使用してください。

Prop/入力ラインタイプストックタイプ動作
optionsLineChartOptionsStockChartOptions構築時のスナップショット。アダプターを差し替えるには再マウントしてください。ライブな視覚変更にはappearanceを使用します。
dataTimeSeriesData | MultiSeriesDataOHLCVData一回限りの転送可能なバルクデータで、オブジェクト識別によってリアクティブです。常に新しいオブジェクトで新しいバッファを割り当ててください。
dataUpdateOptionsLineDataUpdateOptions—アニメーション化されたラインデータの置換を制御します。preservePreviousFrameを含みます。
appearanceDeepPartial<LineAppearanceOptions>DeepPartial<StockAppearanceOptions>チャートやデータを再作成せずに適用される深い視覚パッチ。
viewportPartial<Viewport>Partial<Viewport>Reactive X 範囲。チャートの X 単位に xMin、xMax、または両方を指定してください。
viewportAnimatedbooleanboolean対応するビューポート更新のアニメーションを上書きします。チャートオプションを継承するには未定義のままにしてください。
statsIntervalMsnumbernumberミニマムのテレメトリコールバック間隔（ミリ秒）；リスナーがいない場合テレメトリは無効のままです。
readiness コールバック/イベントLineChartStockChartinitialize() が解決した後に1回発火し、命令的なチャートを公開します。
エラーコールバック/イベントunknownunknownは構築エラー、レンダラーの初期化/実行時の失敗、およびオーバーレイの解決/配送の失敗を報告します。
統計コールバック/イベントLineChartStatsStockChartStatsはレンダラーとデータのテレメトリをstatsIntervalMsで報告します。
シリーズ可視性コールバック/イベントSeriesVisibilityChangeEvent—は初期化、API呼び出し、およびインタラクティブ凡例からの可視性変化を報告します。

各アダプターは準備完了、構築、レンダラー、およびオーバーレイのエラーに加え、レンダリング統計を報告します。ラインアダプターはさらにSeriesVisibilityChangeEventを報告します。各フレームワークは従来のrefまたはコンポーネントAPIを通じて基盤となるLineChartまたはStockChartインスタンスを公開するため、稀な命令的操作も引き続き利用可能です。

チャート障害を処理する

アダプターのエラーフックはunknownを受け入れます。なぜならJavaScriptの構築エラーは特定のクラスを使用する必要がないためです。Sixtyfoldレンダラーから発生する障害はChartRendererErrorインスタンスです。オーバーレイの解決またはレンダラーへの配送の障害はChartOverlayErrorインスタンスです。構造化フィールドを読む前に値の型を絞ってください:

import {
  ChartOverlayError,
  ChartRendererError,
} from "@sixtyfold/line";

export function reportChartError(error: unknown) {
  if (error instanceof ChartRendererError) {
    console.error(error.phase, error.message);
    return;
  }
  if (error instanceof ChartOverlayError) {
    console.error("Overlay sources failed:", error.sources);
    return;
  }
  console.error(error);
}

ストック専用アプリケーションでは@sixtyfold/stockから同じインポートを使用してください。error.phaseは"initialization"または"runtime"のいずれかです。レンダラーの障害はそのチャートインスタンスを破壊します。アプリケーションが回復を選ぶ場合はアダプターを再マウントしてください。オーバーレイの障害は致命的ではありません: 成功した項目はインストールされたままで、要求した全項目が失敗した場合は以前のオーバーレイが維持されます。

大量の型付き配列はWorkerへ転送されます。各データオブジェクトをワンショットとして扱ってください: その場で変更せず、各更新ごとに新しいバッファを持つ新しいオブジェクトを割り当ててください。これにより数百万ポイントのデータセットでもゼロコピー経路が維持されます。

React

import { useMemo, useRef } from "react";
import {
  SixtyfoldLineChart,
  type LineChartHandle,
} from "@sixtyfold/react/line";

export function Signals() {
  const chartRef = useRef<LineChartHandle>(null);
  const data = useMemo(() => ({
    x: new Float64Array([0, 1, 2, 3]),
    y: new Float64Array([3, 7, 4, 9]),
    length: 4,
  }), []);

  return (
    <SixtyfoldLineChart
      ref={chartRef}
      data={data}
      aria-label="Signal history"
      onError={console.error}
    />
  );
}

コンポーネントは通常の canvas 属性を受け取ります。ref は ref.current?.chart を公開します。初期構築はマイクロタスク遅延されるため、React Strict Mode の開発ライフサイクルプローブが初期データを二重に渡すことはありません。

React 専用サーフェス型説明
refRef<LineChartHandle | StockChartHandle>転送されたハンドルで、その chart フィールドはマウントされた命令型インスタンスまたは null を含みます。
ネイティブなキャンバス属性CanvasHTMLAttributes<HTMLCanvasElement>キャンバスへ渡されます（childrenを除く）。aria-label、クラス名、インラインスタイル、テスト、ポインタメタデータに使用してください。
onReady(chart) => void初期化が成功した後に一度呼び出されます。
onError(error: unknown) => voidコンストラクション、レンダラーの初期化/ランタイム、またはオーバーレイの解決/配送の失敗時に呼び出されます。
onStats(stats) => voidレンダラーのテレメトリを有効にし、受信します。
onSeriesVisibilityChange(event) => void線のみの系列表示コールバック。

Vue

<script setup lang="ts">
import { shallowRef } from "vue";
import { SixtyfoldLineChart } from "@sixtyfold/vue/line";

const data = shallowRef({
  x: new Float64Array([0, 1, 2, 3]),
  y: new Float64Array([3, 7, 4, 9]),
  length: 4,
});
</script>

<template>
  <SixtyfoldLineChart
    :data="data"
    aria-label="Signal history"
    @error="console.error"
  />
</template>

大量データにはVueの深いプロキシの代わりにshallowRefまたはmarkRawを使用してください。コンポーネントはready、error、statsを発行します；折れ線グラフはseriesVisibilityChangeも発行します。テンプレートrefは浅いchart refを公開します。

Vue サーフェス型説明
共有プロップフレームワークのプロップ索引を参照Vue のプロップは共有契約と同じ名前と型を使用します。
ready イベントLineChart | StockChart初期化されたインペラティブチャートを発火します。
error イベントunknownコンストラクション、レンダラーの初期化／実行時、またはオーバーレイの解決/配送の失敗を発火します。
stats イベントLineChartStats | StockChartStatsテレメトリを有効にし、発火します。
seriesVisibilityChange イベントSeriesVisibilityChangeEvent線のみの可視性イベント。
継承属性ネイティブな Canvas 属性aria-label、class、style のような未認識属性はキャンバスに転送されます。
テンプレート ref chartShallowRef<LineChart | StockChart | null>マウントされた命令的チャートを深いプロキシ化なしに公開します。

Angular

Angular 20–22 パッケージはスタンドアロンコンポーネントと Angular Package Format の二次エントリポイントを使用します。

import { Component } from "@angular/core";
import { SixtyfoldLineChartComponent } from "@sixtyfold/angular/line";

@Component({
  standalone: true,
  imports: [SixtyfoldLineChartComponent],
  template: `
    <sixtyfold-line-chart
      [data]="data"
      ariaLabel="Signal history"
      (chartError)="reportError($event)"
    />
  `,
})
export class Signals {
  data = {
    x: new Float64Array([0, 1, 2, 3]),
    y: new Float64Array([3, 7, 4, 9]),
    length: 4,
  };

  reportError(error: unknown) {
    console.error(error);
  }
}

入力は共通テーブルに加え、アクセシビリティの重点フィールドと canvasAttributes に従います。出力は chartReady、chartError、stats であり、ラインコンポーネントはさらに seriesVisibilityChange を発行します。コンポーネント参照は公開された chart を公開します。

Angular のアプリケーションビルダーはパッケージ所有の Vite Worker URL を変換しません。アプリケーションで使用するエンジンをビルドターゲットの assets 配列に angular.json 内で追加してください：

[
  { "glob": "**/*", "input": "node_modules/@sixtyfold/line/dist/assets", "output": "assets" },
  { "glob": "**/*", "input": "node_modules/@sixtyfold/stock/dist/assets", "output": "assets" }
]

チャートの構築は isPlatformBrowser で保護されているため、Angular SSR はブラウザグローバルを触りません。

Angular 入力型説明
optionsLineChartOptions | StockChartOptionsコンストラクション時スナップショット。
dataLineData | OHLCVDataワンショットで転送可能なリアクティブデータセット。
dataUpdateOptionsLineDataUpdateOptions線のみ置換のアニメーションオプション。
appearanceDeepPartial<LineAppearanceOptions | StockAppearanceOptions>リアクティブなビジュアルパッチ。
viewportPartial<Viewport>リアクティブなXドメインパッチ。
viewportAnimatedboolean | undefinedビューポート入力のアニメーション上書き。
statsIntervalMsnumber | undefinedstats に購読者がいるときの最小テレメトリ間隔。
canvasClassstring内部キャンバスに適用されるクラス。
ariaLabelstringアクセシブルなキャンバス名。
ariaDescribedBystringチャートを説明する隣接するテキストまたは表の代替要素のID。
canvasRolestring明示的なキャンバスロール；通常はチャートに選択させます application または img。
canvasTabIndexnumber明示的なタブ順; 表示専用のチャートはデフォルトで省略されます。
canvasAttributesRecord<string, string | number | boolean | null | undefined>テストフックやメタデータなどの追加のキャンバス属性。クラス、スタイル、サイズ、ロール、タブ順、およびフォーカスされたアクセシビリティ入力は別途管理され続けます。
Angular 出力ペイロード説明
chartReadyLineChart | StockChart初期化済みの命令型チャートを発行します。
chartErrorunknownコンストラクション、レンダラーの初期化／ランタイム、またはオーバーレイの解決/配送の失敗を発行します。
statsLineChartStats | StockChartStatsレンダラーのテレメトリを有効化して発行します。
seriesVisibilityChangeSeriesVisibilityChangeEvent線のみの可視性出力。
public chartLineChart | StockChart | nullコンポーネント参照上に公開された命令型インスタンス。

Svelte

<script lang="ts">
  import LineChart from "@sixtyfold/svelte/line";

  const data = {
    x: new Float64Array([0, 1, 2, 3]),
    y: new Float64Array([3, 7, 4, 9]),
    length: 4,
  };
</script>

<LineChart
  {data}
  ariaLabel="Signal history"
  onError={console.error}
/>

chart は命令的アクセスのためにバインド可能です。追加の Svelte プロップは折れ線グラフ用の onReady、onError、onStats、onSeriesVisibilityChange、および canvasClass、canvasStyle、ariaLabel です。

Svelte プロップ/バインディング型説明
共有プロップフレームワークプロップ索引を参照共有の options、data、appearance、ビューポート、テレメトリ、およびコールバックプロップを使用します。
onReady(chart) => void初期化済みの命令型チャートを受け取ります。
onError(error: unknown) => void構築、レンダラーの初期化／実行、またはオーバーレイの解決/配送の失敗を報告します。
onStats(stats) => voidテレメトリを有効にして受け取ります。
onSeriesVisibilityChange(event) => void線のみの可視性コールバック。
canvasClassstringキャンバスに適用されるクラス。
canvasStylestringキャンバスに適用されるCSS宣言のテキスト。
ariaLabelstringアクセシブルなキャンバス名。
bindable chartLineChart | StockChart | nullマウントされた命令型チャート；クリーンアップ時に null にリセットされます。

SolidJS

import { SixtyfoldLineChart } from "@sixtyfold/solid/line";

const data = {
  x: new Float64Array([0, 1, 2, 3]),
  y: new Float64Array([3, 7, 4, 9]),
  length: 4,
};

export function Signals() {
  return (
    <SixtyfoldLineChart
      data={data}
      canvasProps={{ "aria-label": "Signal history" }}
      chartRef={(chart) => console.log(chart)}
      onError={console.error}
    />
  );
}

chartRef はマウントされたチャートを受け取り、クリーンアップ時に null を呼び出します。canvasProps はネイティブのキャンバス属性を渡します。他の全ての props は共通の契約に従います。

SolidJS 専用サーフェス型説明
chartRef(chart | null) => voidマウントされた命令型チャートを受け取り、クリーンアップ時に後で null を呼び出します。
canvasPropsJSX.CanvasHTMLAttributes<HTMLCanvasElement>ネイティブのCanvas属性、アクセシビリティメタデータ、class、style、およびテストフック。
onReady(chart) => void初期化が正常に完了した後に呼び出されます。
onError(error: unknown) => voidコンストラクション、レンダラーの初期化／ランタイム、またはオーバーレイの解決/配送の失敗時に呼び出されます。
onStats(stats) => voidテレメトリを有効化し受信します。
onSeriesVisibilityChange(event) => void線のみの可視性コールバック。

完全な例

公開リポジトリには、各対応フレームワーク向けの最小限のレスポンシブアプリケーションが含まれます。各アプリケーションは、パッケージ、データ形式、チャートの設定、およびラインチャートとストックチャートの両方を再現するために必要なクリーンアップを示します。