uPlot-wrappers

Een verzameling uPlot wrappers waarmee je declaratief met grafieken kunt werken binnen je favoriete framework.

Inhoudsopgave

• Motivatie
• Aan de slag
• React
• Installatie
• Hoe te gebruiken
• Demo
• Vue.js
• Installatie
• Hoe te gebruiken
• Demo
• Svelte
• Installatie
• Hoe te gebruiken
• Demo
• Documentatie

Motivatie

Hoewel er al verschillende andere uPlot wrappers bestaan, hebben ze allemaal één van de volgende beperkingen:

• Ze creëren een uPlot instantie één keer, tijdens de component-mountfase, en verwachten dat je alle update-logica zelf afhandelt.
• Ze maken een nieuwe uPlot instantie aan telkens wanneer de props veranderen, zelfs als de instantie gewoon geüpdatet kan worden om de wijzigingen weer te geven.

In vergelijking probeert deze bibliotheek zo goed mogelijk te voorkomen dat de uPlot instantie opnieuw wordt aangemaakt wanneer de props veranderen. In plaats van opnieuw aanmaken probeert het de openbare API van uPlot te gebruiken om deze up-to-date te houden met de props.

Aan de slag

Zie de secties React, Vue.js of Svelte hieronder, afhankelijk van welk framework je gebruikt. Zie ook de API documentatie die gemeenschappelijk is voor alle frameworks.

React

Installatie

Installeer het uplot-react pakket met uplot als afhankelijkheid:

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

Je hebt ook React 16.8 of hoger nodig, geïnstalleerd binnen je projectstructuur.

Hoe te gebruiken

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

Demo

Bekijk de live demo

Je kunt de demo-app ook lokaal uitvoeren:

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

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

ReactJS Demo

eenvoudig voorbeeld om snel aan de slag te gaan. ReactJS Demo

Vue.js

Installatie

Installeer het uplot-vue pakket met uplot als afhankelijkheid:

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

Je moet ook Vue.js geïnstalleerd hebben binnen je projectstructuur (zowel versie 2.6 als 3.x worden ondersteund).

Hoe te gebruiken

Gebruik van template

JSX gebruiken

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

Opmerking: Eigenschapswijzigingen door mutatie worden niet ondersteund vanwege Vue-beperking. Je moet een kopie van de eigenschap maken, d.w.z. deze vervangen in plaats van muteren. Zie een voorbeeld voor het algemene idee.

Demo

Bekijk de Vue.js 2 live demo

Je kunt de demo-app ook lokaal uitvoeren:

$ 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

Installatie

Installeer het uplot-svelte pakket met uplot als afhankelijkheid:

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

Je moet ook Svelte geïnstalleerd hebben binnen je projectmap. Het UplotSvelte component is compatibel met Svelte en SvelteKit projecten.

Hoe te gebruiken

Demo

Zie het voorbeeld Svelte voorbeeld

Je kunt de demo-app ook lokaal uitvoeren:

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

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

Documentatie

| Parameter | Vereiste | Beschrijving | | :-------------: | :---------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | options | vereist | Opties voor uPlot. Worden als het eerste argument aan de uPlot constructor doorgegeven: new uPlot(options) | | data | vereist | Data voor uPlot. Wordt als het tweede argument aan de uPlot constructor doorgegeven: new uPlot(options, data) | | target | optioneel | Doel-html-element voor uPlot. Wordt als het derde argument aan de uPlot constructor doorgegeven: new uPlot(options, data, target) Een nieuw div-doel-element wordt automatisch aangemaakt als er geen wordt meegegeven in de props | | onCreate | optioneel | Callback-functie, aangeroepen bij het aanmaken of opnieuw aanmaken van de uPlot instantie | | onDelete | optioneel | Callback-functie, aangeroepen voordat de uPlot instantie wordt vernietigd, hetzij omdat de props zo veel zijn veranderd dat het onmogelijk is de grafiek bij te werken, hetzij omdat de component op het punt staat te worden ontkoppeld | | className/class | optioneel | Een class-naam die wordt meegegeven aan het automatisch aangemaakte doel-div-element. Class-naam wordt genegeerd wanneer de 'target'-prop gebruikt wordt. | | resetScales | optioneel | Vlag die bepaalt of de schalen opnieuw moeten worden ingesteld bij een wijziging van de data. Standaard op true. |

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