Gráficos de líneas

Inicio rápido por framework

Renderiza el mismo gráfico de líneas de seis formas

Elige la API imperativa de TypeScript o un adaptador ligero. Todas las pestañas usan los mismos datos tipados y opciones.

chart.ts@sixtyfold/line

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 de forma independiente geometría de línea, escalón, rango, dispersión, barra o área apilada mientras comparten ejes, interacción y descripciones emergentes.

La configuración exacta y las firmas de los métodos están en las referencias generadas Line options, LineChart methods, y line data types.

Geometría de la serie

Tipo	Entrada	Uso previsto
`line`	`Float64Array`	Observaciones continuas con interpolación recta o configurada.
`step-before`, `step-after`, `step-mid`	`Float64Array`	Valores que se aplican durante un intervalo. `step` alias `step-after`.
`range`	`{ low, high, y? }`	Incertidumbre, min/max, percentiles u otro envolvente. `band` es un alias.
`scatter`	`Float64Array`	Puntos independientes. `points` es un alias.
`bar`	`Float64Array`	Valores renderizados desde una línea base configurable. `column` es un alias.
`stacked-area`	`Float64Array`	Contribuciones ordenadas sumadas en geometría acumulada.

SeriesOptions contiene nombre común, color, ancho, unidad, relleno y campos de marcador. Las opciones específicas de geometría viven bajo band, point, bar y stack para que configuraciones no relacionadas no se vuelvan ambiguas.

Datos de rango

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

Use una serie media explícita cuando el agregado verdadero no sea (low + high) / 2. Oculte el trazo central del rango con un ancho de serie cero y desactive los límites con band.borderWidth: 0 cuando el sobreenvolvente por sí solo transmita la información prevista.

Level of detail (LOD)

LOD significa level of detail. 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 puntos finales ordenados, extremos y huecos NaN reales. La mayoría de aplicaciones deberían mantener los valores predeterminados.

La cuadrícula adaptativa permanece estable durante la animación y repintados no relacionados. Cambia solo después de que un zoom continuado se desplace lo suficiente más allá del nivel de detalle actual.

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

Opción	Predeterminado	Rango aceptado	Significado
`density`	`0.75`	`0.25–2`	Columnas de presentación objetivo por píxel CSS. Más columnas conservan detalle local y cuestan más trabajo.
`rebaseRatio`	`1.25`	`1.05–2`	Deriva máxima de ancho proyectado antes de que la cuadrícula adhesiva cambie.
`quantizationStep`	`0.25`	`0.05–1`	Intervalo disponible dentro de cada octava binaria. Pasos más pequeños hacen que los cambios de representación sean más finos.

Ajuste rebaseRatio y quantizationStep juntos. Para cambios más suaves, comience cerca de 1 + quantizationStep, como 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 navegadores objetivo y relaciones de píxel de dispositivo.

Aplique el parche a la política sin reconstruir el gráfico ni rehacer su jerarquía:

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

mode: "pyramid" selecciona entre niveles globales min/max preconstruidos. Las áreas apiladas siempre usan este camino porque reducir independientemente cada entrada 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 originados en la inicialización, la API o una leyenda interactiva. legend.allowHideAll controla si la leyenda integrada puede ocultar la última serie visible.

Transmisión continua

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

Use addVectors para columnas tipadas existentes. El buffer circular mantiene la visualización cronológica después de que se desborde.

Reemplazo animado

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