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 utilizar de forma independente as geometrias linha, degrau, intervalo, dispersão, barra ou área-empilhada enquanto partilham eixos, interacção e info‑balões.

A configuração exacta e as assinaturas de métodos encontram‑se nas geradas Line options, LineChart methods e na referência de line data types.

Geometria da série

SeriesOptions contém campos comuns de nome, cor, largura, unidade, preenchimento e marcador. Opções específicas da geometria vivem sob 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,
});

Utilize 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 desative 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, depois, revelar pormenores mais finos à medida que faz zoom. A política predefinida adaptive preserva pontos finais ordenados, extremos e lacunas reais NaN. A maioria das aplicações deve manter os valores predefinidos.

A grelha adaptativa mantém-se estável durante animação e repinturas não relacionadas. Só muda depois de movimentos de zoom contínuos que se afastem o suficiente do nível de detalhe atual.

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

Ajuste rebaseRatio e quantizationStep em conjunto. Para mudanças mais suaves, comece perto de 1 + quantizationStep, por exemplo 1.10–1.12 com 0.10. Uma banda de intervalo multi-passe visualmente sensível pode beneficiar de 0.05 e 1.06–1.08; meça o custo nos browsers alvo e nas razões de píxel do dispositivo.

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

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

mode: "pyramid" seleciona entre níveis pré-construídos de mínimo/máximo globais. Áreas empilhadas usam sempre este percurso porque reduzir independentemente cada entrada 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);
});

Os callbacks de visibilidade identificam alterações que se originam na inicialização, na API ou numa legenda interativa. legend.allowHideAll controla se a legenda integrada pode ocultar a série visível final.

Streaming

Após initialize(), crie um stream de capacidade fixa com dimensões inteiras positivas:

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

addVector exige um carimbo temporal finito e um valor por série configurada. Copia os valores escalares antes de enfileirá‑los, para que o chamador possa reutilizar esse array imediatamente. Mantenha os carimbos temporais em ordem ascendente; use NaN para um valor Y em falta, não para um carimbo temporal.

Use addVectors(timestamps, valuesBySeries) para colunas Float64Array existentes. Forneça uma coluna por série configurada, cada uma com o comprimento dos carimbos temporais, e carimbos temporais finitos. A validação termina antes de as amostras escalares enfileiradas serem descarregadas ou buffers serem transferidos. Uma falha de validação deixa, portanto, a fila inalterada e os buffers do chamador anexados.

As inserções escalares e em bloco válidas mantêm a sua ordem de chamada. O ring buffer preserva a ordem cronológica de visualização depois de fazer wrap, e a construção do LOD pode completar enquanto continuam as inserções. Chamar initStreaming novamente descarta as amostras enfileiradas do stream antigo. Repor a transmissão ou substituir os dados também cancela a animação de viewport pendente do conjunto de dados antigo.

Substituição animada

setData e setMultiSeriesData revelam novas séries da esquerda para a direita quando a animação está ativada. preservePreviousFrame: true mantém o gráfico anterior à frente do novo limite de revelação. Utilize-o apenas depois de a revelação precedente estar concluída e restaure imediatamente o viewport ao substituir uma pré-visualização pelo seu conjunto de dados completo.