§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-сервера.