60FOLDCOMPONENTS

ライブ例グループ

ドキュメントの例がオプションをどのように観察可能な挙動にマッピングするか。

各ドキュメント例は、インタラクティブなチャートと同期された読み取り専用でコピー可能なTypeScriptを組にしています。例はキュレーション済みデータセットを使用しているため、ドキュメントはモバイル上でも応答性を維持します；エンジニアリング作業台は最大データ量を示します。

詳細度（LOD）調整

下のインタラクティブグループはキュレーション済みデータセットを安定させつつ、適応的な詳細度ポリシーのためにdensity、rebaseRatio、およびquantizationStepを公開します。プレビューはsetLODOptions経由で更新されます；隣接するTypeScriptは読み取り専用で同期され、コピー可能です。

ランタイムの外観

これらの例は、このウェブサイトで選択したテーマに従います。安定した default API ID は Midnight を選択します。現在のライト／ダークプリセットとセレクターの設定方法はテーマを参照してください。正確なオプションとメンバーは Line API と Stock API で確認でき、ライン、株価、レンダリング、ストリーミング、SSR のガイドにはタスク別の例があります。

例のライフサイクル契約

プレビューはルートまたはロケールが変わるとチャートを破棄します。応答性を保つためにメインスレッド上のキュレーション済みデータセットを使用しています；匿名のエンジニアリング作業台は数百万ポイントを扱うWorkerデモの場です。

インタラクティブ・リファレンス

詳細度（LOD）

0.75
1.12
0.10

左右の矢印キーで移動、プラスとマイナスでズーム、Home キーでリセットできます。

チャートを準備中…
import { LineChart } from "@sixtyfold/line";
import { getThemePreset } from "@sixtyfold/themes";

const preset = getThemePreset("default");
const chart = new LineChart(canvas, {
  ...preset.line.appearance,
  renderMode: "main",
  lod: {
    mode: "adaptive",
    density: 0.75,
    rebaseRatio: 1.12,
    quantizationStep: 0.10,
  },
});

await chart.initialize();
chart.setMultiSeriesData(data);
chart.updateAppearance(preset.line.appearance);
preset.line.series.forEach((series, index) => {
  chart.updateSeriesAppearance(index, series);
});