§Ẏagr

Yagr est un moteur de rendu de graphiques HTML5 Canvas haute performance basé sur uPlot. Il offre des fonctionnalités de haut niveau pour les graphiques uPlot.

§Fonctionnalités

• Lignes, aires, colonnes et points comme types de visualisation. Configurables par série
• Info-bulle de légende configurable
• Axes avec des options supplémentaires pour la précision des décimales
• Échelles avec des fonctions de plage et des transformations configurables
• Lignes et bandes de tracé. Couche de dessin configurable
• Graphiques réactifs (nécessite ResizeObserver)
• Support de haut niveau pour les aires/colonnes empilées
• Marqueurs configurables
• Thème clair/sombre
• Normalisation des données
• Règle, marqueurs de curseur et accrochage configurables
• Typescript
• Localisation
• Variables CSS dans les noms de couleurs
• Légende en ligne paginée
• Gestion des erreurs et hooks étendus
• Alignement et interpolation des données pour les données manquantes
• Mises à jour en temps réel

§Documentation

§Démarrage rapide

npm i @gravity-ui/yagr

§Module NPM

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',
        },
    ],
});

§Balise Script

<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>

§Exemples

Besoin de quelque chose de spécifique ? Yagr propose des exemples utiles dans le dossier demo/examples. Comment les lancer avec la version actuelle :

1. Clonez le dépôt.
2. Installez les dépendances npm i.
3. Exécutez npm run build.
4. Exécutez npx http-server ..
5. Ouvrez les exemples dans le navigateur en suivant la sortie de http-server.