Gráficos de linhas

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 renderiza várias séries contra uma coluna X ordenada. As séries podem usar independentemente geometria de linha, passo, intervalo, dispersão, barra ou área-empilhada enquanto partilham eixos, interação e tooltips.

A configuração exata e assinaturas de método estão no Line options, LineChart methods, e nos line data types de referência.

Geometria da série

SeriesOptions contém nome comum, cor, largura, unidade, preenchimento e campos de marcador. Opções específicas de geometria residem em band, point, bar e stack para que definições não relacionadas não se tornem ambíguas.

Dados de intervalo

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

Use uma série média explícita quando o agregado real não for (low + high) / 2. Suprima o traço do centro do intervalo com largura de série zero e desactive limites com band.borderWidth: 0 quando apenas o envelope transmitir a informação pretendida.

Nível de detalhe (LOD)

LOD significa nível de detalhe. Permite ao gráfico desenhar uma representação do tamanho do ecrã de um conjunto de dados muito maior e revelar mais detalhe à medida que amplia. A política padrão adaptive preserva pontos finais ordenados, extremos e lacunas reais NaN. A maioria das aplicações deve manter os padrões.

A grelha adaptativa permanece estável durante animação e redesenhos não relacionados. Muda apenas depois de movimentos de zoom contínuos que ultrapassem suficientemente o nível de detalhe actual.

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

Afine rebaseRatio e quantizationStep em conjunto. Para mudanças mais suaves, comece perto de 1 + quantizationStep, como 1.10–1.12 com 0.10. Uma banda de intervalo multi-pass sensível visualmente pode beneficiar de 0.05 e 1.06–1.08; meça o custo nos browsers alvo e nas densidades de pixels do dispositivo.

Aplique o patch à política sem reconstruir o gráfico nem reconstruir a sua hierarquia:

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

mode: "pyramid" selecciona entre níveis globais min/max pré-construídos. Áreas empilhadas usam sempre este caminho porque reduzir cada entrada independentemente alteraria a geometria cumulativa.

Visibilidade e aparência

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

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

Callbacks de visibilidade identificam mudanças originadas na inicialização, na API ou numa legenda interactiva. legend.allowHideAll controla se a legenda incorporada pode ocultar a última série visível.

Streaming

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

Use addVectors para colunas tipadas existentes. O ring buffer mantém a apresentação cronológica após o transbordo.

Substituição animada

setData e setMultiSeriesData revelam novas séries da esquerda para a direita quando a animação está activada. preservePreviousFrame: true mantém o gráfico anterior à frente da nova fronteira de revelação. Use-o apenas após a revelação precedente estar completa e restaure o viewport imediatamente ao substituir uma pré-visualização pelo seu conjunto de dados completo.