§Ẏagr

Yagr es un renderizador de gráficos HTML5 Canvas de alto rendimiento basado en uPlot. Proporciona funcionalidades de alto nivel para gráficos uPlot.

§Características

• Líneas, áreas, columnas y puntos como tipos de visualización. Configurables por serie
• Tooltip de leyenda configurable
• Ejes con opciones adicionales para precisión a nivel decimal
• Escalas con funciones de rango y transformaciones configurables
• Líneas y bandas de trazado. Capa de dibujo configurable
• Gráficos responsivos (requiere ResizeObserver)
• Soporte de alto nivel para áreas/columnas apiladas
• Marcadores configurables
• Tema claro/oscuro
• Normalización de datos
• Retículas, marcadores de cursor y ajuste configurables
• Typescript
• Localización
• Variables CSS en nombres de color
• Leyenda en línea paginada
• Manejo de errores y hooks extendidos
• Alineación e interpolación de datos para datos faltantes
• Actualizaciones en tiempo real

§Documentación

§Inicio Rápido

npm i @gravity-ui/yagr

§Módulo 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',
        },
    ],
});

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

§Ejemplos

¿Necesitas algo específico? Yagr presenta algunos ejemplos útiles en la carpeta demo/examples. Cómo iniciarlos con la versión actual:

1. Clona el repositorio.
2. Instala las dependencias npm i.
3. Ejecuta npm run build.
4. Ejecuta npx http-server ..
5. Abre los ejemplos en el navegador según la salida de http-server.