Grupos de exemplos interativos

Cada exemplo da documentação emparelha um gráfico interativo com um TypeScript sincronizado, apenas leitura e copiável. Os exemplos usam conjuntos de dados curados para que a documentação se mantenha responsiva em dispositivos móveis; o laboratório de engenharia demonstra volumes máximos de dados.

Calibração do LOD

O grupo interativo abaixo mantém o seu conjunto de dados curado estável enquanto expõe density, rebaseRatio e quantizationStep para a política adaptativa de nível de detalhe. A pré-visualização atualiza-se através de setLODOptions; o seu TypeScript adjacente é somente leitura, sincronizado e copiável.

Aparência em tempo de execução

Os exemplos seguem o tema selecionado neste website. O identificador API estável default seleciona Midnight. Consulte Temas para ver os predefinidos claros e escuros atuais e a configuração do seletor. Use a Line API e a Stock API para opções e membros exatos; os guias de linhas, ações, renderização, streaming e SSR fornecem exemplos focados em tarefas.

Contrato de ciclo de vida do exemplo

A pré-visualização destrói o seu gráfico quando a rota ou localidade muda. Usa um conjunto de dados no thread principal curado para se manter responsiva em dispositivos móveis; o laboratório de engenharia anónimo é o local para demonstrações em workers com milhões de pontos.

import { LineChart } from "@sixtyfold/line";
import { getThemePreset } from "@sixtyfold/themes";

const preset = getThemePreset("default");
const chart = new LineChart(canvas, {
  ...preset.line.appearance,
  renderMode: "main",
  lod: {
    mode: "adaptive",
    density: 0.75,
    rebaseRatio: 1.12,
    quantizationStep: 0.10,
  },
});

await chart.initialize();
chart.setMultiSeriesData(data);
chart.updateAppearance(preset.line.appearance);
preset.line.series.forEach((series, index) => {
  chart.updateSeriesAppearance(index, series);
});