Envoltorios de uPlot

Una colección de envoltorios de uPlot que te permiten trabajar con gráficos de manera declarativa dentro de tu framework favorito.

Tabla de Contenidos

• Motivación
• Primeros pasos
• React
• Instalación
• Cómo usar
• Demostración
• Vue.js
• Instalación
• Cómo usar
• Demostración
• Svelte
• Instalación
• Cómo usar
• Demostración
• Documentación

Motivación

Aunque ya existen varios otros wrappers para uPlot, todos ellos tienen una de las siguientes limitaciones:

• Crean la instancia de uPlot una vez, durante la fase de montaje del componente, y esperan que tú manejes toda la lógica de actualización por tu cuenta.
• Recrean la instancia de uPlot desde cero cada vez que cambian las props, incluso si la instancia puede actualizarse para reflejar los cambios.

En comparación, esta biblioteca intenta lo mejor posible no recrear la instancia de uPlot cuando cambian las props. En lugar de recrearla, intenta usar la API pública de uPlot para mantenerla actualizada con las props.

Primeros pasos

Consulta las secciones de React, Vue.js o Svelte más abajo dependiendo de qué framework estés utilizando. También consulta la documentación de la API común para todos los frameworks.

React

Instalación

Instala el paquete uplot-react junto con la dependencia uplot:

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

También necesitas tener instalado React 16.8 o superior dentro de tu proyecto.

Cómo usar

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

Demo

Vea la demo en vivo

También puede ejecutar la aplicación demo localmente:

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

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

Demo ReactJS

Ejemplo simple para comenzar rápidamente. Demo ReactJS

Vue.js

Instalación

Instale el paquete uplot-vue con la dependencia uplot:

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

También necesita que Vue.js esté instalado dentro de su árbol de proyecto (se soportan versiones 2.6 y 3.x).

Cómo usar

Usando plantilla

Usando 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: Los cambios de propiedad por mutación no son compatibles debido a una limitación de Vue. Debe crear una copia de la propiedad, es decir, reemplazarla en su lugar, vea un ejemplo para la idea general.

Demo

Vea la demo en vivo de Vue.js 2

También puede ejecutar la aplicación 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

Instalación

Instale el paquete uplot-svelte con la dependencia uplot:

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

También necesita que Svelte esté instalado dentro de su árbol de proyecto. El componente UplotSvelte es compatible con proyectos Svelte y SvelteKit.

Cómo usar

Demo

Vea el ejemplo Ejemplo de Svelte

También puede ejecutar la aplicación demo localmente:

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

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

Documentación

| Parámetro | Requisito | Descripción | | :-------------: | :---------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | options | obligatorio | Opciones para uPlot. Se pasan como el primer argumento al constructor de uPlot: new uPlot(options) | | data | obligatorio | Datos para uPlot. Se pasan como el segundo argumento al constructor de uPlot: new uPlot(options, data) | | target | opcional | Elemento html objetivo para uPlot. Se pasa como el tercer argumento al constructor de uPlot: new uPlot(options, data, target) Se creará automáticamente un nuevo elemento div objetivo si no se pasa en las props | | onCreate | opcional | Función callback, invocada al crear o recrear la instancia de uPlot | | onDelete | opcional | Función callback, invocada antes de que la instancia de uPlot sea destruida, ya sea porque las props han cambiado tanto que es imposible actualizar el gráfico o porque el componente está a punto de desmontarse | | className/class | opcional | Un nombre de clase pasado al elemento div objetivo creado automáticamente. El nombre de clase se ignora cuando se usa la prop 'target'. | | resetScales | opcional | Indicador que controla si se deben reiniciar las escalas al cambiar los datos. Por defecto es true. |

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