§Agr

Yagr es un renderizador de gráficos de lienzo HTML5 de alto rendimiento basado en uPlot. Proporciona funciones de alto nivel para los gráficos de uPlot.

§Características

• Líneas, áreas, columnas y puntos como tipos de visualización. Configurable por serie
• Descripción emergente de leyenda configurable
• Ejes con opciones adicionales para una precisión de nivel decimal
• Escalas con transformaciones y funciones de rango configurables
• Líneas argumentales y bandas. Capa de dibujo configurable
• Gráficos adaptables (requiere ResizeObserver)
• Soporte de alto nivel de áreas/columnas apiladas
• Marcadores configurables
• Tema claro/oscuro
• Normalización de datos
• Puntos de mira, marcadores de cursor y ajuste configurables
• Texto mecanografiado
• Localización
• Variables CSS en nombres de colores
• Leyenda en línea paginada
• Gestión de errores y ganchos 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 de 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. Instale las dependencias. npm i
3. Corre npm run build.
4. Corre npx http-server ..
5. Abra los ejemplos en el navegador según la salida del servidor http.