§Ẏagr

Yagr ist ein performanter HTML5 Canvas Chart Renderer, der auf uPlot basiert. Er bietet High-Level-Funktionen für uPlot-Diagramme.

§Funktionen

• Linien, Flächen, Säulen und Punkte als Visualisierungstypen. Konfigurierbar pro Serie
• Konfigurierbarer Legenden-Tooltip
• Achsen mit zusätzlichen Optionen für Dezimalpräzision
• Skalen mit konfigurierbaren Bereichsfunktionen und Transformationen
• Plot-Linien und -Bänder. Konfigurierbare Zeichenebene
• Responsive Diagramme (erfordert ResizeObserver)
• High-Level-Unterstützung für gestapelte Flächen/Säulen
• Konfigurierbare Marker
• Hell-/Dunkel-Thema
• Daten-Normalisierung
• Konfigurierbare Kreuzhaare, Cursor-Marker und Snapping
• Typescript
• Lokalisierung
• CSS-Variablen in Farbnamen
• Seitenweise Inline-Legende
• Fehlerbehandlung und erweiterte Hooks
• Daten-Ausrichtung und Interpolation für fehlende Daten
• Echtzeit-Updates

§Dokumentation

§Schnelleinstieg

npm i @gravity-ui/yagr

§NPM Modul

import Yagr from '@gravity-ui/yagr';

new Yagr(document.body, {
    timeline: [1, 2, 3, 4, 5],
    series: [
        {
            data: [1, 2, 3, 4, 5],
            color: 'red',
        },
        {
            data: [2, 3, 1, 4, 5],
            color: 'green',
        },
    ],
});

§Script Tag

<script src="https://unpkg.com/@gravity-ui/yagr/dist/yagr.iife.min.js"></script>
<script>
    new Yagr(document.body, {
        timeline: [1, 2, 3, 4, 5],
        series: [
            {
                data: [1, 2, 3, 4, 5],
                color: 'red',
            },
            {
                data: [2, 3, 1, 4, 5],
                color: 'green',
            },
        ],
    });
</script>

§Beispiele

Benötigen Sie etwas Bestimmtes? Yagr bietet einige nützliche Beispiele im Ordner demo/examples. So starten Sie sie mit der aktuellen Version:

1. Klonen Sie das Repository.
2. Installieren Sie die Abhängigkeiten npm i.
3. Führen Sie npm run build aus.
4. Führen Sie npx http-server . aus.
5. Öffnen Sie die Beispiele im Browser gemäß der Ausgabe von http-server.