uPlot wrappers

Une collection de wrappers uPlot qui vous permettent de travailler avec des graphiques de manière déclarative dans votre framework préféré.

Table des matières

• Motivation
• Commencer
• React
• Installation
• Comment utiliser
• Démo
• Vue.js
• Installation
• Comment utiliser
• Démo
• Svelte
• Installation
• Comment utiliser
• Démo
• Documentation

Motivation

Bien que plusieurs autres wrappers uPlot existent déjà, tous présentent l'une des limitations suivantes :

• Ils créent l'instance uPlot une seule fois, lors de la phase de montage du composant, et attendent que vous gériez toute la logique de mise à jour vous-même.
• Ils recréent l'instance uPlot à chaque modification des props, même si l'instance peut être mise à jour pour refléter les changements.

En comparaison, cette bibliothèque fait de son mieux pour ne pas recréer l'instance uPlot lorsque les props changent. Au lieu de la recréer, elle essaie d'utiliser l'API publique de uPlot pour la maintenir à jour avec les props.

Pour bien démarrer

Voir les sections React, Vue.js ou Svelte ci-dessous selon le framework que vous utilisez. Consultez également la documentation de l’API commune à tous les frameworks.

React

Installation

Installez le package uplot-react avec la dépendance uplot :

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

Vous devez également avoir React 16.8 ou supérieur installé dans votre projet.

Comment utiliser

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

Démo

Voir la démo en direct

Vous pouvez également exécuter l'application de démonstration localement :

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

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

Démo ReactJS

exemple simple pour démarrer rapidement. Démo ReactJS

Vue.js

Installation

Installez le package uplot-vue avec la dépendance uplot :

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

Vous devez également avoir Vue.js installé dans votre projet (les versions 2.6 et 3.x sont supportées).

Comment utiliser

Utilisation avec un template

Utilisation de 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) => {}}
            />
        );
    }
}

Remarque : Les modifications de propriétés par mutation ne sont pas prises en charge en raison d'une limitation de Vue. Vous devez créer une copie de la propriété, c’est-à-dire la remplacer à la place, voir un exemple pour l’idée générale.

Démo

Voir la démo en direct Vue.js 2

Vous pouvez également exécuter l’application de démonstration localement :

$ 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

Installation

Installez le package uplot-svelte avec la dépendance uplot :

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

Vous devez également avoir Svelte installé dans votre projet. Le composant UplotSvelte est compatible avec les projets Svelte et SvelteKit.

Comment utiliser

Démo

Voir l'exemple Exemple Svelte

Vous pouvez également exécuter l'application de démonstration localement :

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

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

Documentation

| Paramètre | Exigence | Description | | :-------------: | :---------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | options | requis | Options pour uPlot. Passées comme premier argument au constructeur uPlot : new uPlot(options) | | data | requis | Données pour uPlot. Passées comme second argument au constructeur uPlot : new uPlot(options, data) | | target | optionnel | Élément html cible pour uPlot. Passé comme troisième argument au constructeur uPlot : new uPlot(options, data, target) Un nouvel élément div cible sera créé automatiquement si aucun n'est passé dans les props | | onCreate | optionnel | Fonction callback, invoquée lors de la création ou recréation d'une instance uPlot | | onDelete | optionnel | Fonction callback, invoquée avant la destruction de l'instance uPlot, soit parce que les props ont tellement changé qu'il est impossible de mettre à jour le graphique, soit parce que le composant est sur le point d'être démonté | | className/class | optionnel | Un nom de classe passé à l'élément div cible créé automatiquement. Le nom de classe est ignoré lorsque la prop 'target' est utilisée. | | resetScales | optionnel | Indicateur contrôlant si les échelles doivent être réinitialisées lors du changement de données. Par défaut à true. |

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