Gráficos de líneas

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 representa múltiples series frente a una columna X ordenada. Las series pueden usar independientemente la geometría de línea, escalón, rango, dispersión, barra o área apilada mientras comparten ejes, interacción y tooltips.

La configuración exacta y las firmas de los métodos aparecen en la referencia generada Line options, LineChart methods y line data types.

Geometría de la serie

SeriesOptions contiene campos comunes como nombre, color, ancho, unidad, relleno y marcador. Las opciones específicas de geometría residen bajo band, point, bar y stack para que las configuraciones no relacionadas no resulten ambiguas.

Datos de rango

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

Utilice una serie de media explícita cuando el agregado real no sea (low + high) / 2. Suprima el trazo del centro del rango con un ancho de serie cero y deshabilite los límites con band.borderWidth: 0 cuando solo la envolvente transmita la información deseada.

Nivel de detalle (LOD)

LOD significa nivel de detalle. Permite que el gráfico dibuje una representación del tamaño de la pantalla de un conjunto de datos mucho mayor y luego revele detalles más finos al hacer zoom. La política predeterminada adaptive preserva los extremos ordenados, los extremos locales y las verdaderas brechas NaN. La mayoría de las aplicaciones deberían mantener los valores predeterminados.

La cuadrícula adaptable permanece estable durante la animación y los redibujados no relacionados. Solo cambia después de que los movimientos de zoom continuados se alejen lo suficiente del nivel de detalle actual.

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

Ajuste rebaseRatio y quantizationStep conjuntamente. Para cambios más suaves, empiece cerca de 1 + quantizationStep, por ejemplo 1.10–1.12 con 0.10. Una banda de rango multipaso visualmente sensible puede beneficiarse de 0.05 y 1.06–1.08; mida el coste en los navegadores objetivo y en las relaciones de píxeles del dispositivo.

Parchee la política sin reconstruir el gráfico ni volver a compilar su jerarquía:

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

mode: "pyramid" selecciona entre niveles globales preconstruidos de mínimo/máximo. Las áreas apiladas siempre usan esta vía porque reducir cada entrada de forma independiente cambiaría la geometría acumulada.

Visibilidad y apariencia

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

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

Las devoluciones de llamada de visibilidad identifican cambios que se originan en la inicialización, la API o una leyenda interactiva. legend.allowHideAll controla si la leyenda incorporada puede ocultar la última serie visible.

Transmisión

Después de initialize(), cree un stream de capacidad fija con dimensiones enteras positivas:

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

addVector requiere una marca de tiempo finita y un valor por cada serie configurada. Copia los valores escalares antes de encolarlos, de modo que el llamador pueda reutilizar esa matriz inmediatamente. Mantenga las marcas de tiempo en orden ascendente; use NaN para un valor Y faltante, no para una marca de tiempo.

Use addVectors(timestamps, valuesBySeries) para columnas Float64Array existentes. Suministre una columna por cada serie configurada, cada una con la misma longitud que las marcas de tiempo, y marcas de tiempo finitas. La validación termina antes de que las muestras escalares encoladas se vacíen o se transfieran los buffers. Por tanto, una falla de validación deja la cola sin cambios y los buffers del llamador adjuntos.

Los appends escalares y en bloque válidos conservan su orden de llamada. El ring buffer mantiene la visualización cronológica después de que se desborda, y la construcción del LOD puede completarse mientras continúan los appends. Llamar a initStreaming de nuevo descarta las muestras encoladas del stream antiguo. Restablecer el streaming o reemplazar los datos también cancela la animación de viewport pendiente del conjunto de datos anterior.

Sustitución animada

setData y setMultiSeriesData revelan nuevas series de izquierda a derecha cuando la animación está activada. preservePreviousFrame: true mantiene el trazado anterior delante del nuevo límite de revelado. Úselo solo después de que el revelado precedente haya finalizado y restaure la ventana de visualización inmediatamente al reemplazar una vista previa por su conjunto de datos completo.