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 trace plusieurs séries par rapport à une colonne X ordonnée. Les séries peuvent utiliser indépendamment la géométrie ligne, marche, intervalle, dispersion, barre ou aire empilée tout en partageant les axes, l’interaction et les infobulles.

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

Géométrie de la série

SeriesOptions contient les champs communs name, color, width, unit, fill et marker. Les options spécifiques à la géométrie se trouvent sous band, point, bar et stack afin d’éviter toute ambiguïté entre des paramètres sans rapport.

Données d’intervalle

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 tracé central de l’intervalle en mettant la largeur de la série à zéro et désactivez les frontières avec band.borderWidth: 0 lorsque l’enveloppe suffit à transmettre l’information souhaitée.

Niveau de détail (LOD)

LOD signifie niveau de détail. Il permet au graphique de tracer une représentation de la taille de l’écran d’un ensemble de données beaucoup plus volumineux, puis de révéler un détail plus fin lorsque vous effectuez un zoom. La politique par défaut adaptive préserve les points d’extrémité ordonnés, les extrema et les véritables intervalles NaN. La plupart des applications devraient conserver les valeurs par défaut.

La grille adaptative reste stable pendant l’animation et les redessins non liés. Elle ne change que lorsqu’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,
  },
});

Accordez rebaseRatio et quantizationStep ensemble. Pour des changements plus fluides, commencez près de 1 + quantizationStep, par exemple 1.10–1.12 avec 0.10. Une bande de plage multi-passe visuellement sensible 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 des appareils.

Appliquez le correctif à la politique sans reconstruire le graphique ni reconstituer sa hiérarchie :

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

mode: "pyramid" sélectionne parmi des niveaux min/max globaux préconstruits. Les aires empilées utilisent toujours ce chemin car réduire chaque entrée indépendamment 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 modifications 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 dernière série visible.

Streaming

Après initialize(), créez un flux à capacité fixe avec des dimensions entières positives :

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

addVector exige un horodatage fini et une valeur par série configurée. Il copie les valeurs scalaires avant de les mettre en file, de sorte que l'appelant peut réutiliser immédiatement ce tableau. Conservez les horodatages en ordre croissant ; utilisez NaN pour une valeur Y manquante, pas pour un horodatage.

Utilisez addVectors(timestamps, valuesBySeries) pour des colonnes Float64Array existantes. Fournissez une colonne par série configurée, chacune correspondant à la longueur des horodatages, et des horodatages finis. La validation se termine avant que les échantillons scalaires mis en file ne soient vidés ou que les tampons ne soient transférés. En cas d’échec de validation, la file reste donc inchangée et les tampons de l’appelant restent attachés.

Les ajouts scalaires et en bloc valides conservent leur ordre d’appel. Le tampon circulaire maintient l’affichage chronologique après son recouvrement, et la construction du niveau de détail (LOD) peut s’achever pendant que des ajouts se poursuivent. Appeler à nouveau initStreaming supprime les échantillons mis en file du flux précédent. Réinitialiser le streaming ou remplacer les données annule également l’animation de volet en attente du jeu de données ancien.

Remplacement animé

setData et setMultiSeriesData dévoilent une nouvelle série 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 l’achèvement 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.