Обёртки для uPlot

Коллекция обёрток для uPlot, позволяющих работать с графиками декларативно в вашем любимом фреймворке.

Содержание

• Мотивация
• Начало работы
• React
• Установка
• Как использовать
• Демо
• Vue.js
• Установка
• Как использовать
• Демо
• Svelte
• Установка
• Как использовать
• Демо
• Документация

Мотивация

Хотя уже существуют несколько других обёрток для uPlot, все они имеют одно из следующих ограничений:

• Они создают экземпляр uPlot один раз, на этапе монтирования компонента, и ожидают, что вы сами будете обрабатывать всю логику обновления.
• Они пересоздают экземпляр uPlot заново при каждом изменении пропсов, даже если экземпляр можно просто обновить для отражения изменений.

В отличие от них, эта библиотека старается не пересоздавать экземпляр uPlot при изменении пропсов. Вместо пересоздания она использует публичный API uPlot для актуализации состояния согласно пропсам.

Начало работы

Смотрите разделы React, Vue.js или Svelte ниже в зависимости от используемого фреймворка. Также ознакомьтесь с документацией API, общей для всех фреймворков.

React

Установка

Установите пакет uplot-react с зависимостью uplot:

• Через npm: $ npm install uplot-react uplot
• Через yarn: $ yarn add uplot-react uplot

Вам также потребуется React версии 16.8 или выше, установленный в вашем проекте.

Как использовать

import React from 'react';
import uPlot from 'uplot';
import UplotReact from 'uplot-react';
import 'uplot/dist/uPlot.min.css';
const Chart = () => (
     {}} onDelete={(chart) => {}} />
);

Демонстрация

Смотрите живую демонстрацию

Вы также можете запустить демонстрационное приложение локально:

$ git clone https://github.com/skalinichev/uplot-wrappers.git

$ cd uplot-wrappers && yarn install && yarn run serveReact

Демонстрация ReactJS

простой пример для быстрого старта. Демонстрация ReactJS

Vue.js

Установка

Установите пакет uplot-vue вместе с зависимостью uplot:

• Через npm: $ npm install uplot-vue uplot
• Через yarn: $ yarn add uplot-vue uplot

Также необходимо установить Vue.js в вашем проекте (поддерживаются версии 2.6 и 3.x).

Как использовать

Использование шаблона

Использование JSX

// Vue.js 2
import Vue from 'vue';
// Vue.js 3
import { createApp } from 'vue';
import uPlot from 'uplot';
import UplotVue from 'uplot-vue';
import 'uplot/dist/uPlot.min.css';
{
    ...,
    render() {
        return (
             {}}
                onCreate={(chart) => {}}
            />
        );
    }
}

Примечание: Изменение свойств посредством мутаций не поддерживается из-за ограничения Vue. Необходимо создавать копию свойства, то есть заменять его, см. пример для общего понимания.

Демонстрация

Смотрите живую демонстрацию Vue.js 2

Вы также можете запустить демо-приложение локально:

$ git clone https://github.com/skalinichev/uplot-wrappers.git

$ cd uplot-wrappers && yarn install

Vue.js 2:

$ yarn run serveVue

Vue.js 3:

$ yarn run serveVue3

Svelte

Установка

Установите пакет uplot-svelte с зависимостью uplot:

• Через npm: $ npm install uplot-svelte uplot
• Через yarn: $ yarn add uplot-svelte uplot

Также необходимо установить Svelte внутри вашего проекта. Компонент UplotSvelte совместим с проектами Svelte и SvelteKit.

Как использовать

Демонстрация

Смотрите пример Svelte example

Вы также можете запустить демонстрационное приложение локально:

$ git clone https://github.com/skalinichev/uplot-wrappers.git

$ cd uplot-wrappers && yarn install && yarn run serveSvelte

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

| Параметр | Требование | Описание | | :-------------: | :---------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | options | требуется | Опции для uPlot. Передаются в качестве первого аргумента конструктору uPlot: new uPlot(options) | | data | требуется | Данные для uPlot. Передаются в качестве второго аргумента конструктору uPlot: new uPlot(options, data) | | target | опционально | Целевой html-элемент для uPlot. Передается как третий аргумент конструктору uPlot: new uPlot(options, data, target) Если не передан, автоматически создается новый div-элемент | | onCreate | опционально | Функция обратного вызова, вызывается при создании или пересоздании экземпляра uPlot | | onDelete | опционально | Функция обратного вызова, вызывается перед уничтожением экземпляра uPlot, либо из-за сильного изменения props, либо перед размонтированием компонента | | className/class | опционально | Имя класса, передаваемое автоматически созданному div-элементу. Имя класса игнорируется, если используется проп 'target'. | | resetScales | опционально | Флаг, управляющий сбросом масштабов при изменении данных. По умолчанию true. |

--- Tranlated By Open Ai Tx | Last indexed: 2025-09-25 ---