Opções partilhadas do gráfico

LineChartOptions e StockChartOptions incluem os mesmos controlos de interação, eixos, rótulos, sobreposições, viewport e renderização. Não constrói um gráfico base nem importa um motor de renderização interno.

Consulte as Opções de Linha] ou as Opções de Ações] para os campos exactos. Os métodos de execução partilhados aparecem directamente em LineChart] e StockChart].

Grupos de construção

Renderizador e interacção

renderMode selecciona auto, worker ou main. Leia o resultado real com getRenderMode().
rendererInitializationTimeout limita o tempo de arranque do renderizador em milissegundos. Por omissão são 15 segundos, começa na construção e pode ser definido como 0 para desactivar o watchdog.
interactive: false desativa pan, zoom, pinch e seleção mantendo a informação de hover.
minViewportRange limita o zoom em unidades de dados X.
yDomain: { min, max } fixa uma ou ambas as extremidades do domínio Y durante zoom, alterações de nível de detalhe e atualizações de streaming; as extremidades omitidas permanecem autoescaladas.
wheelZoomSpeed, wheelZoomDirection, keyboardZoomSpeed e keyboardPanSpeed afinam a navegação.
keyboardActivation escolhe controlo por teclado baseado no foco ou no hover.
keyboardAnnouncements localiza as mensagens de estado educadas emitidas após pan, zoom, reset e cancelamento de seleção por teclado; o seu opcional modelo viewport aceita {startPercent}, {endPercent} e {spanPercent}. Defina‑o como false quando o anfitrião fornecer feedback equivalente.
animated controla revelações de dados e transições de viewport/eixos. Quando omitido, prefers-reduced-motion: reduce desativa a animação e alterações nessa preferência são observadas enquanto o gráfico permanecer montado. Um explícito true ou false mantém‑se autoritativo.

Conteúdo Canvas

grid, axis, chartBackground, rangeSelector, tooltip, crosshairStyle, selection, labels, overlay, padding e textDirection funcionam da mesma forma em gráficos de linha e de ações.

A tipografia dos gráficos tem por defeito a DEFAULT_CHART_FONT_FAMILY exportada, uma pilha de fontes com SFMono em primeiro lugar. Os campos family por superfície continuam a ser mandatórios.

Use um domínio completamente fixo quando uma visualização em tempo real deva preservar a escala visual em vez de seguir cada novo extremo:

const chart = new LineChart(canvas, {
  yDomain: { min: 0, max: 100 },
});

yDomain está desativado por predefinição. É partilhado entre gráficos de linha e de ações e aplica-se de forma consistente a renderização em worker, thread principal e SSR.

Controles da vista

const current = chart.getViewport();

chart.setViewport(
  { xMin: current.xMin + 60_000, xMax: current.xMax - 60_000 },
  { animated: true },
);

chart.reset({ animated: true });

As arestas de vista omitidas mantêm o seu valor atual. Os intervalos são normalizados em relação à extensão completa de dados e ao minViewportRange do gráfico.

Aparência em tempo de execução

O comportamento definido apenas na construção e a aparência mutável são intencionalmente separados. getOptions() devolve o instantâneo completo normalizado. getAppearance() devolve apenas os campos que podem ser atualizados com segurança em tempo de execução. Ambos são tipados como instantâneos DeepReadonly; objetos simples e arrays aninhados são copiados. Por isso, aplique as alterações através dos métodos de runtime em vez de modificar os valores devolvidos.

chart.updateAppearance({
  chartBackground: "#081018",
  grid: { color: "rgba(130, 180, 220, 0.16)" },
  axis: { bottom: { labelFont: { color: "#a9bac9" } } },
});

As alterações (patches) mesclam-se na aparência atual. setLabels() e setOverlay() assíncrono são métodos de conveniência focados para o mesmo estado.

Agrupe alterações síncronas quando uma única ação de utilizador atualiza várias propriedades:

chart.batch(() => {
  chart.updateAppearance({ grid: { color: "#26384a" } });
  chart.setViewport({ xMin, xMax });
});

Não chame await dentro de batch; apenas as chamadas síncronas feitas antes do retorno do callback são coalescidas.

Balões de ajuda

A tooltip integrada é renderizada com Canvas2D. tooltip.onRender é executado no thread principal e pode substituir o seu título e linhas; mantenha-o rápido porque o movimento do ponteiro pode invocá‑lo frequentemente. tooltip.onLeave é apropriado para limpar o estado da aplicação.

Use titleFormat explícito para valores X numéricos grandes. A deteção automática considera valores acima de aproximadamente mil milhões como semelhantes a tempo.

Sobreposições

As sobreposições suportam texto, retângulos, círculos, linhas e imagens em coordenadas relativas à área do gráfico ou ao canvas completo, em proporção ou em pixels CSS. Fontes de imagem em string são buscadas e decodificadas assincronamente. Aguarde setOverlay() e configure CORS para imagens remotas.

Os handles fornecidos pelo chamador ImageBitmap permanecem propriedade do chamador. O worker e o thread principal de renderização fazem structured-clone e fecham apenas as clones propriedade do renderer. Um overlay de fundo criado em runtime ou apenas eager pode ser fechado depois de initialize() ser cumprido. Se um overlay de construção misturar um bitmap do chamador com uma URL ou outra fonte resolvida assincronamente, mantenha o handle aberto até o overlay ser substituído ou destruído; alternativamente, chame e aguarde setOverlay() após a inicialização antes de o fechar.

Os backgrounds em runtime e os overlays apenas eager podem ser fechados depois de updateAppearance() (ou do seu batch() que o contém) retornar, mesmo que a inicialização esteja pendente. Para um overlay runtime misto ou diferido, chame setOverlay() diretamente e mantenha os handles do chamador abertos até a promessa ser resolvida. A implementação de fetch/decodificação de URL é entregue como um chunk on‑demand separado e não faz parte do runtime inicial do browser.

Se algumas fontes falharem, setOverlay() instala os itens bem‑sucedidos e rejeita com ChartOverlayError. Se todos os itens pedidos falharem, o overlay previamente renderizado permanece instalado. Falhas de resolução e de entrega ao renderer também atingem setOverlayErrorCallback() e os hooks de erro do adaptador de framework. Substituir uma atualização pendente ou destruir o gráfico é cancelamento rotineiro: a promessa pendente resolve sem instalar e nenhum erro de overlay é reportado.

Acessibilidade

A Sixtyfold adiciona semântica de substituição apenas quando o host ainda não a forneceu. Gráficos interativos recebem role="application", tabindex="0" e um nome acessível de substituição. Gráficos apenas de visualização (interactive: false) recebem role="img" e não são adicionados à ordem de tabulação. Os atributos existentes role, tabindex, aria-label e aria-labelledby são preservados.

Prefira um nome e uma descrição específicos da aplicação:

<canvas
  aria-label="Hourly load for feeder 12"
  aria-describedby="feeder-12-summary"
></canvas>
<p id="feeder-12-summary">Latest load is 73 kW; the daily peak was 96 kW.</p>

Para um gráfico interativo, forneça um resumo de texto adjacente ou uma alternativa em tabela de dados e referencie‑o com aria-describedby. Não force role="img" num gráfico operado por teclado. A cor não deve ser a única forma como a aplicação circundante identifica uma série.

Pan, zoom, reposição por teclado e cancelamento de seleção são anunciados através de uma região live oculta com politeness. Localize estas mensagens com keyboardAnnouncements, atualize‑as depois com setKeyboardAnnouncements(), ou desactive‑as quando a aplicação circundante fornecer feedback equivalente. O modelo de viewport opcional pode adicionar o início, fim e extensão visíveis como percentagens do intervalo completo de dados. Mensagens animadas de pan, zoom e reposição aguardam que o renderer confirme que o viewport se estabilizou, pelo que um frame intermédio de animação nunca é anunciado.

Sixtyfold não anuncia cada amostra transmitida ou repintura através de aria-live; anúncios em alta frequência tornariam o gráfico inutilizável com um leitor de ecrã. Quando uma aplicação tiver eventos significativos, como perda de ligação de feed ou ultrapassagem de um limiar, exponha-os através de uma região live propriedade da aplicação e com throttling.