uPlot wrappers

Kolekcja wrapperów uPlot, które pozwalają pracować z wykresami deklaratywnie w Twoim ulubionym frameworku.

Spis treści

• Motywacja
• Pierwsze kroki
• React
• Instalacja
• Jak używać
• Demo
• Vue.js
• Instalacja
• Jak używać
• Demo
• Svelte
• Instalacja
• Jak używać
• Demo
• Dokumentacja

Motywacja

Podczas gdy istnieje już kilka innych wrapperów uPlot, wszystkie mają jedno z następujących ograniczeń:

• Tworzą instancję uPlot tylko raz, podczas montowania komponentu, i oczekują, że sam będziesz obsługiwać całą logikę aktualizacji.
• Tworzą nową instancję uPlot za każdym razem, gdy zmieniają się propsy, nawet jeśli instancja może zostać zaktualizowana, aby odzwierciedlić zmiany.

W porównaniu ta biblioteka stara się nie tworzyć ponownie instancji uPlot po zmianie propsów. Zamiast rekreacji stara się używać publicznego API uPlot, aby utrzymać ją zgodną z propsami.

Pierwsze kroki

Sprawdź sekcje React, Vue.js lub Svelte poniżej, w zależności od używanego frameworka. Zobacz także wspólną dla wszystkich frameworków dokumentację API.

React

Instalacja

Zainstaluj paczkę uplot-react wraz z zależnością uplot:

• Za pomocą npm: $ npm install uplot-react uplot
• Za pomocą yarn: $ yarn add uplot-react uplot

Musisz także mieć zainstalowaną wersję React 16.8 lub wyższą w swoim projekcie.

Jak używać

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

Demo

Zobacz demo na żywo

Możesz także uruchomić aplikację demo lokalnie:

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

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

Demo ReactJS

prosty przykład, aby szybko rozpocząć pracę. Demo ReactJS

Vue.js

Instalacja

Zainstaluj pakiet uplot-vue razem z zależnością uplot:

• Używając npm: $ npm install uplot-vue uplot
• Używając yarn: $ yarn add uplot-vue uplot

Musisz także mieć zainstalowany Vue.js w swoim projekcie (wspierane są wersje 2.6 oraz 3.x).

Jak używać

Użycie szablonu

Używanie 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) => {}}
            />
        );
    }
}

Uwaga: Zmiany właściwości przez mutację nie są obsługiwane ze względu na ograniczenie Vue. Musisz utworzyć kopię właściwości, tzn. zamiast tego ją zastąpić, zobacz przykład, aby poznać ogólny zamysł.

Demo

Zobacz demo na żywo dla Vue.js 2

Możesz też uruchomić aplikację demo lokalnie:

$ 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

Instalacja

Zainstaluj pakiet uplot-svelte wraz z zależnością uplot:

• Za pomocą npm: $ npm install uplot-svelte uplot
• Za pomocą yarn: $ yarn add uplot-svelte uplot

Musisz również zainstalować Svelte w drzewie projektu. Komponent UplotSvelte jest zgodny z projektami Svelte oraz SvelteKit.

Jak używać

Demo

Zobacz przykład przykład Svelte

Możesz również uruchomić aplikację demo lokalnie:

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

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

Dokumentacja

| Parametr | Wymaganie | Opis | | :-------------: | :---------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | options | wymagany | Opcje dla uPlot. Przekazywane jako pierwszy argument do konstruktora uPlot: new uPlot(options) | | data | wymagany | Dane dla uPlot. Przekazywane jako drugi argument do konstruktora uPlot: new uPlot(options, data) | | target | opcjonalny | Docelowy element html dla uPlot. Przekazywany jako trzeci argument do konstruktora uPlot: new uPlot(options, data, target) Nowy docelowy element div zostanie utworzony automatycznie, jeśli żaden nie zostanie przekazany w propsach | | onCreate | opcjonalny | Funkcja zwrotna, wywoływana przy utworzeniu lub ponownym utworzeniu instancji uPlot | | onDelete | opcjonalny | Funkcja zwrotna, wywoływana przed zniszczeniem instancji uPlot, gdy propsy zmieniły się tak bardzo, że nie da się zaktualizować wykresu lub gdy komponent ma zostać odmontowany | | className/class | opcjonalny | Nazwa klasy przekazywana do automatycznie utworzonego docelowego elementu div. Nazwa klasy jest ignorowana, gdy używany jest props 'target'. | | resetScales | opcjonalny | Flaga kontrolująca, czy zresetować skale przy zmianie danych. Domyślnie ustawiona na true. |

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