Liniendiagramme

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 rendert mehrere Serien gegen eine geordnete X‑Spalte. Serien können unabhängig Linien‑, Schritt‑, Bereichs‑, Streu‑, Balken‑ oder gestapelte‑Flächen‑Geometrie verwenden und hierbei Achsen, Interaktion und Tooltips gemeinsam nutzen.

Die genaue Konfiguration und Methodensignaturen finden Sie in den generierten Line options, LineChart Methoden und line data types Referenz.

Seriengeometrie

SeriesOptions enthält gemeinsame Felder wie Name, Farbe, Breite, Einheit, Füllung und Marker. Geometrie-spezifische Optionen liegen unter band, point, bar und stack, damit nicht zusammenhängende Einstellungen nicht mehrdeutig werden.

Bereichsdaten

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

Verwenden Sie eine explizite Mittelwertreihe, wenn die tatsächliche Aggregation nicht (low + high) / 2 ist. Unterdrücken Sie die Mittellinien-Stroke des Bereichs mit einer Serie-Breite von null und deaktivieren Sie Grenzen mit band.borderWidth: 0, wenn allein die Hülle die beabsichtigte Information vermittelt.

Detailstufe (LOD)

LOD bedeutet Detailstufe. Sie ermöglicht es dem Diagramm, eine bildschirmgroße Darstellung eines deutlich größeren Datensatzes zu zeichnen und beim Hereinzoomen feinere Details freizugeben. Die Standard-adaptive-Richtlinie bewahrt geordnete Endpunkte, Extrema und echte NaN-Lücken. Die meisten Anwendungen sollten die Standardeinstellungen beibehalten.

Das adaptive Raster bleibt während Animationen und nicht verwandter Neuzeichnungen stabil. Es ändert sich nur, wenn fortgesetzte Zoombewegungen weit genug über die aktuelle Detailstufe hinausgehen.

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

Passen Sie rebaseRatio und quantizationStep gemeinsam an. Für sanftere Änderungen beginnen Sie nahe bei 1 + quantizationStep, etwa 1.10–1.12 mit 0.10. Eine visuell empfindliche Mehrfachdurchlauf-Range-Band kann von 0.05 und 1.06–1.08 profitieren; messen Sie die Kosten in den Zielbrowsern und bei verschiedenen device-pixel-ratios.

Patchen Sie die Policy, ohne das Chart neu zu konstruieren oder seine Hierarchie neu aufzubauen:

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

mode: "pyramid" wählt zwischen vorgefertigten globalen Min/Max-Ebenen. Gestapelte Bereiche verwenden stets diesen Pfad, da das unabhängige Reduzieren jeder Eingabe die kumulative Geometrie verändern würde.

Sichtbarkeit und Erscheinungsbild

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

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

Sichtbarkeits-Callbacks identifizieren Änderungen, die von der Initialisierung, der API oder einer interaktiven Legende ausgehen. legend.allowHideAll steuert, ob die eingebaute Legende die zuletzt sichtbare Serie verbergen darf.

Streaming

Nach initialize() erstellen Sie einen Fixed‑Capacity‑Stream mit positiven ganzzahligen Dimensionen:

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

addVector erfordert einen endlichen Zeitstempel und einen Wert pro konfigurierter Serie. Er kopiert die skalaren Werte vor dem Einreihen, sodass der Aufrufer dieses Array sofort wiederverwenden kann. Halten Sie die Zeitstempel aufsteigend; verwenden Sie NaN für einen fehlenden Y‑Wert, nicht für einen Zeitstempel.

Verwenden Sie addVectors(timestamps, valuesBySeries) für vorhandene Float64Array‑Spalten. Liefern Sie eine Spalte pro konfigurierter Serie, jeweils in der Länge der Zeitstempel, und endliche Zeitstempel. Die Validierung endet, bevor einge­reihte skalare Samples ausgespült oder Puffer übertragen werden. Ein Validierungsfehler lässt daher die Warteschlange unverändert und die Puffer des Aufrufers angehängt.

Gültige skalare und Bulk‑Anhänge behalten ihre Aufrufreihenfolge bei. Der Ringpuffer bewahrt die chronologische Anzeige nach dem Überlaufen, und LOD‑Konstruktion kann abgeschlossen werden, während Anhänge weiterlaufen. Ein erneuter Aufruf von initStreaming verwirft einge­reihte Samples des alten Streams. Das Zurücksetzen des Streamings oder Ersetzen der Daten bricht außerdem die ausstehende Viewport‑Animation des alten Datasets ab.

Animierter Ersatz

setData und setMultiSeriesData blenden bei aktivierter Animation neue Serien von links nach rechts ein. preservePreviousFrame: true lässt den vorherigen Plot vor der neuen Enthüllungsgrenze sichtbar bleiben. Verwenden Sie ihn nur, nachdem die vorherige Enthüllung abgeschlossen ist, und stellen Sie den Viewport sofort wieder her, wenn Sie eine Vorschau durch den vollständigen Datensatz ersetzen.