Graphiques en lignes

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 affiche plusieurs séries par rapport à une colonne X ordonnée. Les séries peuvent utiliser indépendamment la géométrie ligne, marche, plage, nuage de points, barre ou aire empilée tout en partageant les axes, l'interaction et les info-bulles.

La configuration exacte et les signatures de méthode se trouvent dans la référence générée Options Line, LineChart méthodes, et types de données line.

Géométrie des séries

SeriesOptions contient les champs nom commun, couleur, largeur, unité, remplissage et repère. Les options spécifiques à la géométrie vivent sous band, point, bar et stack afin que des réglages non liés ne deviennent pas ambigus.

Données de plage

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

Utilisez une série moyenne explicite lorsque l'agrégat réel n'est pas (low + high) / 2. Supprimez le trait central de la plage avec une largeur de série nulle et désactivez les frontières avec band.borderWidth: 0 lorsque l'enveloppe seule transmet l'information voulue.

Niveau de détail (LOD)

LOD signifie niveau de détail. Il permet au graphique de dessiner une représentation de la taille de l'écran d'un jeu de données beaucoup plus grand, puis de révéler des détails plus fins lors du zoom. La politique adaptive par défaut préserve les points d'extrémité ordonnés, les extrema et les vraies lacunes NaN. La plupart des applications devraient conserver les valeurs par défaut.

La grille adaptive reste stable pendant l'animation et les redessins non liés. Elle ne change que si un zoom continu dépasse suffisamment le niveau de détail actuel.

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

Ajustez rebaseRatio et quantizationStep ensemble. Pour des changements plus douces, commencez près de 1 + quantizationStep, par exemple 1.10–1.12 avec 0.10. Une bande multi-passe sensible visuellement peut bénéficier de 0.05 et 1.06–1.08 ; mesurez le coût sur les navigateurs cibles et les rapports de pixels de l'appareil.

Patchez la politique sans reconstruire le graphique ni reconstruire sa hiérarchie :

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

mode: "pyramid" sélectionne parmi des niveaux globaux min/max préconstruits. Les aires empilées utilisent toujours cette voie car réduire indépendamment chaque entrée modifierait la géométrie cumulative.

Visibilité et apparence

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

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

Les callbacks de visibilité identifient les changements provenant de l'initialisation, de l'API ou d'une légende interactive. legend.allowHideAll contrôle si la légende intégrée peut masquer la série visible finale.

Streaming

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

Utilisez addVectors pour les colonnes typées existantes. Le tampon circulaire maintient l'affichage chronologique après son retour à zéro.

Remplacement animé

setData et setMultiSeriesData dévoilent les nouvelles séries de gauche à droite lorsque l'animation est activée. preservePreviousFrame: true maintient le tracé précédent en avance sur la nouvelle frontière de révélation. Ne l'utilisez qu'après la fin de la révélation précédente, et restaurez immédiatement la fenêtre d'affichage lors du remplacement d'un aperçu par son jeu de données complet.