折れ線グラフ

フレームワーク別クイックスタート

同じ折れ線チャートを6通りで描画

TypeScript の命令型 API または薄いフレームワークアダプターを選択できます。すべてのタブで同じ型付きデータとオプションを使います。

chart.ts@sixtyfold/line

import { LineChart } from "@sixtyfold/line";

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

const canvas = document.querySelector<HTMLCanvasElement>("#chart")!;
const chart = new LineChart(canvas, {
  renderMode: "auto",
  axis: { bottom: { format: "time" } },
  series: [{ name: "Signal", color: "#4ecca3" }],
});

await chart.initialize();
chart.setData(data);


window.addEventListener("pagehide", () => chart.destroy(), { once: true });

@sixtyfold/lineは一つの順序付けられた X 列に対して複数の系列を描画します。系列は軸、操作、ツールチップを共有しつつ、個別に線、ステップ、範囲、散布、棒、または積み上げ面のジオメトリを使用できます。

正確な構成とメソッド署名は、生成されたLine options、LineChart methods、およびline data typesリファレンスに記載されています。

系列ジオメトリ

タイプ	入力	想定用途
`line`	`Float64Array`	直線または設定された補間による連続観測。
`step-before`、`step-after`、`step-mid`	`Float64Array`	間隔にわたって適用される値。 `step` 別名 `step-after`。
`range`	`{ low, high, y? }`	不確実性、最小/最大、パーセンタイル、またはその他のエンベロープ。`band` はエイリアスです。
`scatter`	`Float64Array`	独立した点。`points` はエイリアスです。
`bar`	`Float64Array`	設定可能なベースラインから描画された値。`column` はエイリアスです。
`stacked-area`	`Float64Array`	順序付けられた寄与が累積的な幾何に合算されます。

SeriesOptions は共通の name、color、width、unit、fill、marker フィールドを含みます。幾何学固有のオプションは band、point、bar、および stack の下に配置して、無関係な設定が曖昧にならないようにします。

範囲データ

chart.setMultiSeriesData({
  x,
  series: [
    { low: temperatureMin, high: temperatureMax },
    temperatureMean,
  ],
  length: x.length,
  seriesCount: 2,
});

真の集約が (low + high) / 2 でない場合は明示的な平均系列を使用してください。包絡だけで意図した情報が伝わる場合は、範囲中心のストロークをゼロ系列幅で抑制し、境界は band.borderWidth: 0 で無効にしてください。

詳細度（LOD）

LODは詳細度を意味します。これはチャートが画面サイズの表現をより大きなデータセットから描画し、ズームに応じてより細かい詳細を表示できるようにします。デフォルトのadaptiveポリシーは順序付けられた端点、極値、および実際のNaNギャップを保持します。ほとんどのアプリケーションではデフォルトを維持するべきです。

アダプティブグリッドはアニメーションや無関係な再描画を通して安定しています。現在の詳細度を十分に超えて継続的にズーム移動した場合にのみ変化します。

const chart = new LineChart(canvas, {
  lod: {
    mode: "adaptive",
    density: 0.75,
    rebaseRatio: 1.25,
    quantizationStep: 0.25,
  },
});

オプション	デフォルト	許容範囲	意味
`density`	`0.75`	`0.25–2`	CSSピクセルあたりの目標表示カラム数。より多くのカラムは局所的な詳細を保持しますがより多くの作業コストがかかります。
`rebaseRatio`	`1.25`	`1.05–2`	スティッキーグリッドが変化する前の最大投影幅ドリフト。
`quantizationStep`	`0.25`	`0.05–1`	各バイナリオクターブ内の利用可能な間隔。ステップを小さくすると表現の変化がより細かくなります。

rebaseRatio と quantizationStep を併せて調整してください。変化を滑らかにするには 1 + quantizationStep の近くから始め、例えば 1.10–1.12 と 0.10 の組み合わせが適します。視覚的に敏感なマルチパス範囲バンドは 0.05 と 1.06–1.08 の恩恵を受ける可能性があります；対象ブラウザとデバイスピクセル比でコストを測定してください。

チャートやその階層を再構築せずにポリシーをパッチ適用してください：

chart.setLODOptions({ density: 0.75, rebaseRatio: 1.12, quantizationStep: 0.1 });

mode: "pyramid" は、事前構築されたグローバルな最小/最大レベルの間を選択します。積み上げエリアは常にこの経路を使用します。各入力を独立して縮小すると累積ジオメトリが変わるためです。

表示と外観

chart.setSeriesVisible(2, false);
chart.setVisibleSeries([0, 1]);
chart.updateSeriesAppearance(0, { color: "#ffe47a", width: 2 });

chart.setSeriesVisibilityCallback((event) => {
  console.log(event.source, event.visibility);
});

表示コールバックは、初期化、API、またはインタラクティブな凡例に起因する変更を識別します。legend.allowHideAll は、組み込み凡例が最終的に表示される系列を非表示にできるかどうかを制御します。

ストリーミング

initialize() の後、正の整数寸法で固定容量のストリームを作成します:

chart.initStreaming(2, 1_000_000);
chart.addVector(timestamp, [phaseL1, phaseL2]);

addVector は有限のタイムスタンプと、構成された各シリーズごとに1つの値を要求します。キューに追加する前にスカラ値をコピーするため、呼び出し元はその配列を直ちに再利用できます。タイムスタンプは昇順に保ってください。Y 値が欠けている場合はタイムスタンプではなく NaN を使用してください。

既存の Float64Array 列には addVectors(timestamps, valuesBySeries) を使用してください。構成された各シリーズごとに1列を供給し、各列はタイムスタンプ長と一致し、タイムスタンプは有限であること。検証はキューに入れられたスカラサンプルがフラッシュされるかバッファが転送される前に完了します。したがって検証失敗時にはキューは変更されず、呼び出し元のバッファはアタッチされたまま残ります。

有効なスカラおよびバルク追加は呼び出し順を保持します。リングバッファはラップ後も時系列表示を維持し、詳細度（LOD）構成は追加が続く間に完了できます。initStreaming を再度呼び出すと古いストリームのキュー済みサンプルが破棄されます。ストリーミングのリセットやデータの置換は、古いデータセットの保留中のビューポートアニメーションもキャンセルします。

アニメーション付きの差し替え

setData と setMultiSeriesData はアニメーションが有効な場合、左から右へ新しい系列を表示します。preservePreviousFrame: true は新しい表示境界の前方に前のプロットを保持します。これは直前の表示が完了してからのみ使用し、プレビューを完全なデータセットに置き換える際は即座にビューポートを復元してください。