Sixtyfold Charts
Gráficos Canvas2D para séries de linhas grandes e conjuntos de dados OHLCV.
Sixtyfold Charts é uma TypeScript e biblioteca de gráficos Canvas2D para conjuntos de dados demasiado grandes para renderização DOM ou SVG ordinária. Os gráficos no navegador utilizam um worker quando suportado para que a preparação e renderização permaneçam fora do thread principal; o mesmo renderer recai para o thread principal quando necessário.
Use @sixtyfold/line para linhas multissérie, passos, intervalos, pontos, barras e áreas empilhadas. Use @sixtyfold/stock para velas OHLCV, volume, indicadores, perfis de volume, linhas de preço e marcadores de eventos.
O runtime de gráficos no navegador não tem dependências de terceiros: Core, Line e Stock dependem apenas de pacotes Sixtyfold. Adaptadores de framework reutilizam o framework já presente na aplicação anfitriã, enquanto a ferramenta de desenvolvimento MCP opcional corre separadamente e nunca entra nos bundles de gráficos.
Comece aqui
- Instale apenas os pacotes de que precisa.
- Crie um gráfico de linhas ou um gráfico de ações.
- Escolha vanilla TypeScript ou um adaptador de framework.
- Leia o contrato de propriedade de typed-array antes de carregar dados de produção.
Cada integração no navegador tem o mesmo ciclo de vida:
const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(data);
// When the view is permanently removed:
chart.destroy();Nível de detalhe (LOD)
LOD significa nível de detalhe. É a representação automática do gráfico adaptada ao tamanho do ecrã de um conjunto de dados maior: os gráficos de linha retêm extremos e lacunas importantes, enquanto os gráficos de ações combinam velas em períodos OHLCV válidos. Detalhes mais finos aparecem à medida que efetua zoom.
O mesmo princípio é familiar nos jogos 3D: objetos distantes usam modelos mais simples porque o ecrã não mostra cada polígono, ganhando detalhe à medida que a câmara se aproxima. Num gráfico, o intervalo visível substitui a distância da câmara—uma visão geral desenha um resumo limitado em vez de milhões de amostras indistinguíveis, depois restaura dados mais finos ao aumentar o zoom. Os predefinidos servem a maioria das aplicações.
Vá mais além
- Use o guia de desempenho e a calibração em direto do nível de detalhe antes de alterar definições de apresentação.
- Escolha entre renderização em worker e na thread principal, ou produza uma saída estática com renderização no servidor.
- Ligue o servidor local Model Context Protocol (MCP) quando um agente de codificação precisar da API instalada exata.
- Abra a API Line ou a API Stock quando necessitar de uma opção, método ou tipo de dados exato.
- Comece por resolver problemas quando um gráfico estiver em branco, lento, com tamanho incorreto ou retendo recursos.
Linagem do projeto
Sixtyfold Charts cresceu a partir de lições aprendidas ao construir 99ff00/react-charty, o seu predecessor. Sixtyfold é uma nova arquitetura e produto em vez de uma versão renomeada.
Fundamentos da investigação
O renderer e o sistema LOD da Sixtyfold são implementações originais TypeScript. As publicações seguintes informaram o design; os links reconhecem essa linhagem, não ancestralidade de código, afiliação ou endosso.
Influências diretas
- M4: A Visualization-Oriented Time Series Data Aggregation — Uwe Jugel, Zbigniew Jerzak, Gregor Hackenbroich e Volker Markl, PVLDB (2014). Informou o sumário ordenado first/minimum/maximum/last usado em intervalos à escala de visualização.
- OM3: An Ordered Multi-level Min-Max Representation for Interactive Progressive Visualization of Time Series — Yunhai Wang et al., PACM (2023). Informou o uso de uma hierarquia para responder a consultas de intervalo visível arbitrárias sem reexaminar cada ponto de origem visível. A Sixtyfold não adopta a representação de base de dados nem o protocolo progressivo do OM3.
- Data Point Selection for Line Chart Visualization: Methodological Assessment and Evidence-Based Guidelines — Jonas Van Der Donckt, Jeroen Van Der Donckt, Michael Rademaker, e Sofie Van Hoecke (2023). A sua avaliação da estabilidade visual durante panorâmica, zoom e streaming informou a grelha de apresentação ancorada e quantizada da Sixtyfold.
Alternativa avaliada
- Downsampling Time Series for Visual Representation — Sveinn Steinarsson, University of Iceland (2013). Introduziu a família Largest-Triangle-Three-Buckets avaliada durante o design. A Sixtyfold não implementa LTTB; o seu LOD de linha de produção usa sumários hierárquicos de intervalos que preservam extremos.
Estas citações descrevem apenas influências de investigação. A Sixtyfold não reproduz o texto do artigo, figuras ou implementações de referência. Publicação e código licenças permanecem separadas da licença Sixtyfold.