uPlot wrappers

Kumpulan pembungkus uPlot yang memungkinkan Anda bekerja dengan grafik secara deklaratif di dalam framework favorit Anda.

Daftar Isi

• Motivasi
• Memulai
• React
• Instalasi
• Cara menggunakan
• Demo
• Vue.js
• Instalasi
• Cara menggunakan
• Demo
• Svelte
• Instalasi
• Cara menggunakan
• Demo
• Dokumentasi

Motivasi

Meskipun beberapa pembungkus uPlot lainnya sudah ada, semuanya memiliki salah satu keterbatasan berikut:

• Mereka membuat instance uPlot sekali, saat fase mounting komponen, dan mengharapkan Anda menangani semua logika pembaruan sendiri.
• Mereka membuat ulang instance uPlot setiap kali props berubah, meskipun instance tersebut dapat diperbarui agar mencerminkan perubahan.

Sebagai perbandingan, pustaka ini berusaha sebaik mungkin untuk tidak membuat ulang instance uPlot saat props berubah. Alih-alih membuat ulang, pustaka ini mencoba menggunakan API publik uPlot untuk menjaga instance tetap sinkron dengan props.

Memulai

Lihat bagian React, Vue.js atau Svelte di bawah sesuai framework yang Anda gunakan. Juga lihat dokumentasi API yang berlaku untuk semua framework.

React

Instalasi

Instal paket uplot-react beserta dependensi uplot:

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

Anda juga perlu menginstal React versi 16.8 atau di atasnya di dalam pohon proyek Anda.

Cara menggunakan

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

Demo

Lihat demo langsung

Anda juga dapat menjalankan aplikasi demo secara lokal:

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

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

Demo ReactJS

Contoh sederhana untuk memulai dengan cepat. Demo ReactJS

Vue.js

Instalasi

Instal paket uplot-vue beserta dependensi uplot:

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

Anda juga perlu memasang Vue.js di dalam pohon proyek Anda (baik versi 2.6 maupun 3.x didukung).

Cara menggunakan

Menggunakan template

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

Catatan: Perubahan properti dengan mutasi tidak didukung karena batasan Vue Anda harus membuat salinan properti, yaitu menggantinya, lihat contoh untuk gambaran umum.

Demo

Lihat demo langsung Vue.js 2

Anda juga dapat menjalankan aplikasi demo secara lokal:

$ 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

Instalasi

Instal paket uplot-svelte beserta dependensi uplot:

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

Anda juga perlu menginstal Svelte di dalam pohon proyek Anda. Komponen UplotSvelte kompatibel dengan proyek Svelte dan SvelteKit.

Cara penggunaan

Demo

Lihat contoh Svelte example

Anda juga dapat menjalankan aplikasi demo secara lokal:

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

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

Dokumentasi

| Parameter | Persyaratan | Deskripsi | | :-------------: | :---------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | options | wajib | Opsi untuk uPlot. Diberikan sebagai argumen pertama pada konstruktor uPlot: new uPlot(options) | | data | wajib | Data untuk uPlot. Diberikan sebagai argumen kedua pada konstruktor uPlot: new uPlot(options, data) | | target | opsional | Elemen html target untuk uPlot. Diberikan sebagai argumen ketiga pada konstruktor uPlot: new uPlot(options, data, target) Elemen div target baru akan dibuat otomatis jika tidak diberikan di props | | onCreate | opsional | Fungsi callback, dipanggil saat pembuatan atau pembuatan ulang instance uPlot | | onDelete | opsional | Fungsi callback, dipanggil sebelum instance uPlot dihancurkan, baik karena props berubah sangat banyak sehingga tidak mungkin memperbarui chart atau karena komponen akan di-unmount | | className/class | opsional | Nama class yang diberikan ke elemen div target yang dibuat secara otomatis. Nama class diabaikan saat properti 'target' digunakan. | | resetScales | opsional | Flag yang mengontrol apakah akan me-reset skala saat data berubah. Default-nya true. |

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