Sixtyfold Charts
Graphiques Canvas2D pour séries temporelles volumineuses et ensembles de données OHLCV.
Sixtyfold Charts est une bibliothèque de graphiques TypeScript et Canvas2D pour des ensembles de données trop volumineux pour un rendu DOM ou SVG ordinaire. Les graphiques dans le navigateur utilisent un worker lorsque pris en charge afin que la préparation et le rendu restent hors du thread principal ; le même rendu retombe sur le thread principal si nécessaire.
Utilisez @sixtyfold/line pour des lignes multi-séries, des steps, plages, points, barres et aires empilées. Utilisez @sixtyfold/stock pour des bougies OHLCV, volume, indicateurs, profils de volume, lignes de prix et marqueurs d’événements.
Le runtime de graphique navigateur n’a pas de dépendances tierces : Core, Line et Stock ne dépendent que des paquets Sixtyfold. Les adaptateurs de framework réutilisent le framework déjà présent dans l’application hôte, tandis que l’outil développeur optionnel MCP s’exécute séparément et n’entre jamais dans les bundles de graphiques.
Commencer ici
- Installez uniquement les paquets dont vous avez besoin.
- Construisez un graphique linéaire ou un graphique boursier.
- Choisissez vanilla TypeScript ou un adaptateur de framework.
- Lisez le contrat de propriété des typed-array avant de charger des données en production.
Chaque intégration navigateur suit le même cycle de vie :
const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(data);
// When the view is permanently removed:
chart.destroy();Niveau de détail (LOD)
LOD signifie niveau de détail. C’est la représentation automatique adaptée à la taille de l’écran d’un ensemble de données plus large : les graphiques linéaires conservent les extrema et les lacunes importantes, tandis que les graphiques boursiers combinent les bougies en périodes OHLCV valides. Un niveau de détail plus fin apparaît en zoomant.
Le même principe est familier aux jeux 3D : les objets lointains utilisent des modèles plus simples parce que l’écran ne peut pas afficher chaque polygone, puis gagnent en détail lorsque la caméra se rapproche. Dans un graphique, la plage visible remplace la distance de la caméra : une vue d’ensemble trace un résumé borné au lieu de millions d’échantillons indiscernables, puis restaure des données plus fines au fur et à mesure du zoom. Les valeurs par défaut conviennent à la plupart des applications.
Aller plus loin
- Utilisez le guide de performance et la calibration du niveau de détail en direct avant de modifier les paramètres de présentation.
- Choisissez entre rendu en worker et thread principal, ou produisez une sortie statique avec le rendering côté serveur.
- Connectez le serveur local Model Context Protocol (MCP) lorsqu’un agent de codage a besoin de l’API exacte installée.
- Ouvrez l’API Line ou l’API Stock lorsque vous avez besoin d’une option, d’une méthode ou d’un type de données précis.
- Commencez par le dépannage lorsqu’un graphique est vide, lent, mal dimensionné ou conserve des ressources.
Lignée du projet
Sixtyfold Charts a grandi à partir des leçons apprises lors de la construction de 99ff00/react-charty, son prédécesseur. Sixtyfold est une nouvelle architecture et produit plutôt qu’une version renommée.
Fondations de la recherche
Le moteur et le système LOD de Sixtyfold sont des implémentations originales TypeScript. Les publications suivantes ont informé la conception ; les liens reconnaissent cette filiation, pas l’ascendance du code, l’affiliation ou l’approbation.
Influences directes
- M4 : A Visualization-Oriented Time Series Data Aggregation — Uwe Jugel, Zbigniew Jerzak, Gregor Hackenbroich et Volker Markl, PVLDB (2014). A informé le résumé ordonné first/minimum/maximum/last utilisé dans les intervalles d’échelle d’affichage.
- OM3 : An Ordered Multi-level Min-Max Representation for Interactive Progressive Visualization of Time Series — Yunhai Wang et al., PACM (2023). A informé l’utilisation d’une hiérarchie pour répondre aux requêtes de plage visible sans rescanner chaque point source visible. Sixtyfold n’adopte pas la représentation de base de données ou le protocole progressif d’OM3.
- Data Point Selection for Line Chart Visualization: Methodological Assessment and Evidence-Based Guidelines — Jonas Van Der Donckt, Jeroen Van Der Donckt, Michael Rademaker, et Sofie Van Hoecke (2023). Son évaluation de la stabilité visuelle lors du panoramique, zoom et streaming a informé la grille de présentation ancrée et quantifiée de Sixtyfold.
Évalué comme alternative
- Downsampling Time Series for Visual Representation — Sveinn Steinarsson, Université d’Islande (2013). A introduit la famille Largest-Triangle-Three-Buckets évaluée pendant la conception. Sixtyfold n’implémente pas LTTB ; son LOD linéaire de production utilise des résumés d’intervalles hiérarchiques préservant les extrema.
Ces citations décrivent uniquement des influences de recherche. Sixtyfold ne reproduit pas le texte des articles, les figures ou les implémentations de référence. Publication et code les licences restent séparées de la licence Sixtyfold.