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-, Treppen-, Bereichs-, Scatter-, Balken- oder gestapelte-Fläche-Geometrie verwenden und dabei Achsen, Interaktion und Tooltips teilen.

Die genaue Konfiguration und Methodensignaturen befinden sich in den generierten Line options, LineChart methods, und line data types Referenz.

Seriengeometrie

SeriesOptions enthält gemeinsame Felder für Namen, Farbe, Breite, Einheit, Füllung und Marker. Geometriespezifische Optionen befinden sich 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 Mittelwertserie, wenn die tatsächliche Aggregation nicht (low + high) / 2 ist. Unterdrücken Sie den Mittelstrich des Bereichs mit einer Serienbreite von null und deaktivieren Sie Grenzen mit band.borderWidth: 0, wenn die Hülle allein die beabsichtigte Information vermittelt.

Detailstufe (LOD)

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

Das adaptive Raster bleibt während Animationen und nicht verwandten Neuzeichnungen stabil. Es ändert sich nur, nachdem fortgesetzte Zoombewegungen weit genug über das aktuelle Detailniveau 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 in der Nähe von 1 + quantizationStep, zum Beispiel 1.10–1.12 mit 0.10. Ein visuell sensibles mehrstufiges Bereichsband kann von 0.05 und 1.06–1.08 profitieren; messen Sie die Kosten in Zielbrowsern und Geräte-Pixel-Verhältnissen.

Pachten Sie die Richtlinie, ohne das Diagramm 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-Niveaus. Gestapelte Flächen verwenden immer diesen Pfad, da eine unabhängige Reduktion 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 letzte sichtbare Serie ausblenden kann.

Streaming

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

Verwenden Sie addVectors für vorhandene typisierte Spalten. Der Ringpuffer erhält die chronologische Anzeige, nachdem er sich überschrieben hat.

Animierter Ersatz

setData und setMultiSeriesData enthüllen neue Serien von links nach rechts, wenn Animation aktiviert ist. preservePreviousFrame: true hält die vorherige Darstellung vor der neuen Reveal-Grenze. Verwenden Sie es nur, nachdem die vorherige Enthüllung abgeschlossen ist, und stellen Sie die Ansicht sofort wieder her, wenn Sie eine Vorschau durch ihren vollständigen Datensatz ersetzen.