uPlot Wrapper

Eine Sammlung von uPlot Wrappern, die es ermöglichen, deklarativ mit Diagrammen innerhalb deines bevorzugten Frameworks zu arbeiten.

Inhaltsverzeichnis

• Motivation
• Erste Schritte
• React
• Installation
• Verwendung
• Demo
• Vue.js
• Installation
• Verwendung
• Demo
• Svelte
• Installation
• Verwendung
• Demo
• Dokumentation

Motivation

Obwohl bereits mehrere andere uPlot-Wrapper existieren, haben alle eine der folgenden Einschränkungen:

• Sie erstellen die uPlot-Instanz nur einmal, während der Komponenteneinbindung, und erwarten, dass Sie die gesamte Update-Logik selbst übernehmen.
• Sie erstellen die uPlot-Instanz bei jeder Änderung der Props neu, selbst wenn die Instanz aktualisiert werden könnte, um die Änderungen widerzuspiegeln.

Im Vergleich dazu versucht diese Bibliothek, die uPlot-Instanz nach einer Änderung der Props nicht neu zu erstellen. Statt einer Neuerstellung wird versucht, die öffentliche API von uPlot zu verwenden, um sie mit den Props aktuell zu halten.

Einstieg

Siehe die Abschnitte zu React, Vue.js oder Svelte unten, je nachdem, welches Framework Sie verwenden. Siehe außerdem die API-Dokumentation, die für alle Frameworks gilt.

React

Installation

Installiere das Paket uplot-react mit der uplot-Abhängigkeit:

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

Du benötigst außerdem React 16.8 oder höher, das in deinem Projekt installiert sein muss.

Verwendung

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

Demo

Siehe die Live-Demo

Sie können die Demo-App auch lokal ausführen:

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

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

ReactJS-Demo

Einfaches Beispiel für einen schnellen Einstieg. ReactJS-Demo

Vue.js

Installation

Installieren Sie das uplot-vue-Paket zusammen mit der uplot-Abhängigkeit:

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

Sie müssen außerdem Vue.js in Ihrem Projekt installiert haben (sowohl Version 2.6 als auch 3.x werden unterstützt).

Verwendung

Verwendung mit Template

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

Hinweis: Änderungen an Eigenschaften durch Mutation werden aufgrund einer Vue-Einschränkung nicht unterstützt. Sie müssen eine Kopie der Eigenschaft erstellen, d.h. sie ersetzen, siehe ein Beispiel für das allgemeine Vorgehen.

Demo

Siehe die Vue.js 2 Live-Demo

Sie können die Demo-App auch lokal ausführen:

$ 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

Installieren Sie das uplot-svelte-Paket zusammen mit der uplot-Abhängigkeit:

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

Sie müssen außerdem Svelte in Ihrem Projekt installiert haben. Die UplotSvelte-Komponente ist mit Svelte- und SvelteKit-Projekten kompatibel.

Verwendung

Demo

Siehe das Beispiel Svelte-Beispiel

Sie können die Demo-App auch lokal ausführen:

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

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

Dokumentation

| Parameter | Voraussetzung | Beschreibung | | :-------------: | :-----------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | options | erforderlich | Optionen für uPlot. Wird als erstes Argument an den uPlot-Konstruktor übergeben: new uPlot(options) | | data | erforderlich | Daten für uPlot. Wird als zweites Argument an den uPlot-Konstruktor übergeben: new uPlot(options, data) | | target | optional | Ziel-HTML-Element für uPlot. Wird als drittes Argument an den uPlot-Konstruktor übergeben: new uPlot(options, data, target) Ein neues div-Ziel-Element wird automatisch erstellt, falls keines übergeben wird | | onCreate | optional | Callback-Funktion, die beim Erstellen oder Neuerstellen der uPlot-Instanz aufgerufen wird | | onDelete | optional | Callback-Funktion, die vor der Zerstörung der uPlot-Instanz aufgerufen wird, entweder weil sich die Props so stark geändert haben, dass ein Update unmöglich ist, oder weil die Komponente gleich entfernt wird | | className/class | optional | Ein Klassenname, der an das automatisch erstellte Ziel-div-Element übergeben wird. Der Klassenname wird ignoriert, wenn die 'target'-Prop verwendet wird. | | resetScales | optional | Flag, das steuert, ob die Skalen beim Datenwechsel zurückgesetzt werden sollen. Standardmäßig auf true gesetzt. |

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