uPlot wrappers

Una collezione di wrapper uPlot che ti permettono di lavorare con i grafici in modo dichiarativo all'interno del tuo framework preferito.

Indice

• Motivazione
• Come iniziare
• React
• Installazione
• Come usare
• Demo
• Vue.js
• Installazione
• Come usare
• Demo
• Svelte
• Installazione
• Come usare
• Demo
• Documentazione

Motivazione

Sebbene esistano già diversi wrapper uPlot, tutti presentano una delle seguenti limitazioni:

• Creano l'istanza di uPlot una sola volta, durante la fase di montaggio del componente, e si aspettano che tu gestisca tutta la logica di aggiornamento autonomamente.
• Ricreano l'istanza di uPlot da zero ogni volta che le props cambiano, anche se l'istanza può essere aggiornata per riflettere le modifiche.

In confronto, questa libreria cerca il più possibile di non ricreare l'istanza di uPlot quando le props cambiano. Invece di ricrearla cerca di usare le API pubbliche di uPlot per mantenerla aggiornata con le props.

Per iniziare

Consulta le sezioni React, Vue.js o Svelte qui sotto a seconda del framework che stai utilizzando. Consulta anche la documentazione dell'API, comune a tutti i framework.

React

Installazione

Installa il pacchetto uplot-react con la dipendenza uplot:

• Usando npm: $ npm install uplot-react uplot
• Usando yarn: $ yarn add uplot-react uplot

Hai anche bisogno di React versione 16.8 o superiore installato nella tua struttura di progetto.

Come usare

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

Demo

Vedi la demo live

Puoi anche eseguire l'app demo localmente:

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

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

Demo ReactJS

semplice esempio per iniziare rapidamente. Demo ReactJS

Vue.js

Installazione

Installa il pacchetto uplot-vue con la dipendenza uplot:

• Usando npm: $ npm install uplot-vue uplot
• Usando yarn: $ yarn add uplot-vue uplot

Hai anche bisogno che Vue.js sia installato nella struttura del tuo progetto (sono supportate sia le versioni 2.6 che 3.x).

Come usare

Utilizzo del template

Utilizzo di 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) => {}}
            />
        );
    }
}

Nota: Le modifiche alle proprietà tramite mutazione non sono supportate a causa di una limitazione di Vue. È necessario creare una copia della proprietà, cioè sostituirla, consulta un esempio per l'idea generale.

Demo

Vedi la demo live Vue.js 2

Puoi anche eseguire l'app demo localmente:

$ 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

Installazione

Installa il pacchetto uplot-svelte con la dipendenza uplot:

• Usando npm: $ npm install uplot-svelte uplot
• Usando yarn: $ yarn add uplot-svelte uplot

Hai anche bisogno che Svelte sia installato all'interno della struttura del tuo progetto. Il componente UplotSvelte è compatibile con progetti Svelte e SvelteKit.

Come si usa

Demo

Consulta l'esempio Esempio Svelte

Puoi anche eseguire l'app demo localmente:

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

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

Documentazione

| Parametro | Requisito | Descrizione | | :-------------: | :---------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | options | richiesto | Opzioni per uPlot. Passate come primo argomento al costruttore uPlot: new uPlot(options) | | data | richiesto | Dati per uPlot. Passati come secondo argomento al costruttore uPlot: new uPlot(options, data) | | target | opzionale | Elemento html di destinazione per uPlot. Passato come terzo argomento al costruttore uPlot: new uPlot(options, data, target) Un nuovo elemento div di destinazione sarà creato automaticamente se non viene passato nelle props | | onCreate | opzionale | Funzione di callback, invocata alla creazione o ricreazione dell'istanza uPlot | | onDelete | opzionale | Funzione di callback, invocata prima che l'istanza uPlot venga distrutta, sia perché le props sono cambiate così tanto che è impossibile aggiornare il grafico, sia perché il componente sta per essere smontato | | className/class | opzionale | Un nome classe passato all'elemento div di destinazione creato automaticamente. Il nome classe viene ignorato quando viene utilizzata la prop 'target'. | | resetScales | opzionale | Flag che controlla se resettare le scale al cambio dei dati. Il valore predefinito è true. |

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