折れ線グラフ

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

同じ折れ線チャートを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、step、range、scatter、bar、または stacked-area ジオメトリを使用できます。

正確な設定とメソッド署名は生成された Line options、LineChart methods、および line data types 参照に記載されています。

系列ジオメトリ

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

SeriesOptions は一般的な名前、色、幅、単位、塗り、マーカーフィールドを含みます。ジオメトリ固有のオプションは 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" は事前構築されたグローバル min/max レベルの中から選択します。積み上げ面は常にこの経路を使用します。各入力を独立に削減すると累積ジオメトリが変わるためです。

表示と外観

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 は組み込み凡例が最終的な表示系列を隠せるかどうかを制御します。

ストリーミング

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

既存の型付き列には addVectors を使用してください。リングバッファはラップ後も年代順の表示を維持します。

アニメーションによる差し替え

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