Sixtyfold Charts

Sixtyfold Charts ist eine TypeScript und Canvas2D-Chartbibliothek für Datensätze, die für gewöhnliches DOM- oder SVG-Rendering zu groß sind. Browser-Charts verwenden, wenn unterstützt, einen Web Worker, sodass Vorbereitung und Rendering außerhalb des UI-Threads stattfinden; derselbe Renderer fällt bei Bedarf auf den Hauptthread zurück.

Verwenden Sie @sixtyfold/line für Mehrserien-Linien, Schritte, Bereiche, Punkte, Balken und gestapelte Flächen. Verwenden Sie @sixtyfold/stock für OHLCV-Kerzen, Volumen, Indikatoren, Volumenprofile, Preislinien und Ereignismarker.

Die Browser-Chart-Laufzeit hat keine Drittabhängigkeiten: Core, Line und Stock hängen nur von Sixtyfold-Paketen ab. Framework-Adapter nutzen das Framework, das bereits in der Host-Anwendung vorhanden ist, während das optionale MCP-Entwicklertool getrennt läuft und niemals in Chart-Bundles gelangt.

Hier anfangen

Installieren Sie nur die Pakete, die Sie benötigen.
Erstellen Sie ein Liniendiagramm oder ein Stock-Chart.
Wählen Sie vanilla TypeScript oder einen Framework-Adapter.
Lesen Sie den Typed-Array-Eigentumsvertrag, bevor Sie Produktionsdaten laden.

Jede Browser-Integration hat denselben Lebenszyklus:

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(data);

// When the view is permanently removed:
chart.destroy();

Detailstufe (LOD)

LOD bedeutet Detailstufe. Es ist die automatische bildschirmgroße Darstellung eines größeren Datensatzes: Liniendiagramme behalten wichtige Extrema und Lücken bei, während Stock-Charts Kerzen zu gültigen OHLCV-Perioden kombinieren. Feinere Details erscheinen beim Zoomen.

Dasselbe Prinzip ist aus 3D-Spielen vertraut: entfernte Objekte verwenden einfachere Modelle, weil der Bildschirm nicht jedes Polygon zeigen kann, und erhalten dann mehr Details, wenn die Kamera näher kommt. In einem Chart ersetzt der sichtbare Bereich die Kameradistanz—eine Übersicht zeichnet statt Millionen ununterscheidbarer Stichproben eine begrenzte Zusammenfassung und stellt beim Hineinzoomen feinere Daten wieder her. Die Standardeinstellungen passen für die meisten Anwendungen.

Weiter gehen

Verwenden Sie die Performance-Anleitung und die Live-LOD-Kalibrierung, bevor Sie Präsentationseinstellungen ändern.
Wählen Sie zwischen Worker- und Hauptthread-Rendering oder erzeugen Sie statische Ausgabe mit Server-Side-Rendering.
Verbinden Sie den lokalen Model Context Protocol (MCP) Server, wenn ein Kodier-Agent die exakt installierte API benötigt.
Öffnen Sie die Line API oder die Stock API, wenn Sie eine genaue Option, Methode oder Datentyp benötigen.
Beginnen Sie mit der Fehlerbehebung, wenn ein Chart leer, langsam, falsch skaliert oder Ressourcen behält.

Projektherkunft

Sixtyfold Charts entstand aus Erkenntnissen, die beim Aufbau von 99ff00/react-charty, seinem Vorgänger, gewonnen wurden. Sixtyfold ist eine neue Architektur und ein neues Produkt und keine umbenannte Veröffentlichung.

Forschungsgrundlagen

Sixtyfolds Renderer- und LOD-System sind originäre TypeScript-Implementierungen. Die folgenden Veröffentlichungen haben das Design beeinflusst; die Links erkennen diese Herkunft an, nicht einen Code-Abstammung, eine Zugehörigkeit oder eine Empfehlung.

Direkte Einflüsse

M4: A Visualization-Oriented Time Series Data Aggregation — Uwe Jugel, Zbigniew Jerzak, Gregor Hackenbroich und Volker Markl, PVLDB (2014). Beeinflusste die geordnete first/minimum/maximum/last-Zusammenfassung, die innerhalb von Anzeige-Skalenintervallen verwendet wird.
OM3: An Ordered Multi-level Min-Max Representation for Interactive Progressive Visualization of Time Series — Yunhai Wang et al., PACM (2023). Beeinflusste die Verwendung einer Hierarchie, um beliebige sichtbare Bereichsabfragen zu beantworten, ohne jede sichtbare Quellpunkt zu durchsuchen. Sixtyfold übernimmt nicht OM3s Datenbankdarstellung oder progressives Protokoll.
Data Point Selection for Line Chart Visualization: Methodological Assessment and Evidence-Based Guidelines — Jonas Van Der Donckt, Jeroen Van Der Donckt, Michael Rademaker und Sofie Van Hoecke (2023). Deren Bewertung der visuellen Stabilität während Scrollen, Zoomen und Streaming beeinflusste Sixtyfolds verankertes, quantisiertes Präsentationsraster.

Bewertete Alternative

Downsampling Time Series for Visual Representation — Sveinn Steinarsson, Universität Island (2013). Führte die Largest-Triangle-Three-Buckets-Familie ein, die während des Designs bewertet wurde. Sixtyfold implementiert LTTB nicht; seine Produktionslinien-LOD verwendet extrema-erhaltende hierarchische Intervallzusammenfassungen.

Diese Zitationen beschreiben ausschließlich Forschungsbeeinflussungen. Sixtyfold reproduziert nicht Text, Abbildungen oder Referenzimplementierungen der Papiere. Veröffentlichung und Code Lizenzen bleiben getrennt von der Sixtyfold-Lizenz.