§Yagr

Yagr — это высокопроизводительный рендерер графиков, использующий технологию HTML5 canvas и основанный на библиотеке uPlot. Он обеспечивает поддержку высокоуровневых функций для графиков uPlot.

§Характеристики

• Линии, области, столбцы и точки как типы визуализации: возможность настройки для каждой серии.
• Легенда с настраиваемыми тултипами.
• Оси с дополнительными параметрами для десятичной точности.
• Шкалы с настраиваемыми функциями диапазона и возможностью преобразования.
• Линии и полосы графика: настраиваемый слой отрисовки.
• Адаптивные графики (требуют использования API ResizeObserver).
• Поддержка стековых областей/столбцов на высоком уровне.
• Настраиваемые маркеры.
• Поддержка светлой и темной темы.
• Нормализация данных.
• Настраиваемые перекрестия, маркеры курсора и привязка.
• Typescript.
• Локализация.
• CSS-переменные для имен цветов.
• Встроенная легенда с пагинацией.
• Обработка ошибок и расширенные хуки.
• Выравнивание данных и интерполяция для отсутствующих значений.
• Обновления в режиме реального времени.

§Документация

§Быстрый старт

npm i @gravity-ui/yagr

§Модуль 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',
    },
  ],
});

§Тег скрипта

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

§Примеры

Конкретные примеры с применением Yagr можно найти в папке demo/examples. Для их запуска в вашей текущей версии выполните следующее :

1. Склонируйте репозиторий.
2. Установите зависимости npm i.
3. Запустите npm run build:
4. Запустите npx http-server ..
5. Откройте примеры в браузере в соответствии с выводом HTTP-сервера.