بسته‌های uPlot

مجموعه‌ای از بسته‌های uPlot که به شما امکان می‌دهد به صورت اعلانی با نمودارها در فریم‌ورک دلخواه خود کار کنید.

فهرست مطالب

• انگیزه
• شروع کار
• ری‌اکت
• نصب
• نحوه استفاده
• دمو
• ویو جی‌اس
• نصب
• نحوه استفاده
• دمو
• سولت
• نصب
• نحوه استفاده
• دمو
• مستندات

انگیزه

در حالی که چندین wrapper دیگر برای uPlot موجود است، همه آن‌ها یکی از محدودیت‌های زیر را دارند:

• آن‌ها یک نمونه uPlot را فقط یک بار، هنگام mount شدن کامپوننت ایجاد می‌کنند و انتظار دارند تمام منطق به‌روزرسانی را خودتان مدیریت کنید.
• هر بار که props تغییر کند، نمونه uPlot را مجدداً ایجاد می‌کنند، حتی اگر بتوان نمونه را به‌روزرسانی کرد تا تغییرات منعکس شود.

در مقایسه، این کتابخانه تلاش می‌کند تا حد امکان پس از تغییر props نمونه uPlot را مجدداً ایجاد نکند. به جای ایجاد مجدد، سعی می‌کند از API عمومی uPlot برای به‌روزرسانی نمونه متناسب با props استفاده کند.

شروع به کار

بخش‌های ری‌اکت، ویو جی‌اس یا سولت را بسته به فریم‌ورکی که استفاده می‌کنید، مشاهده کنید. همچنین مستندات API مستندات مشترک بین همه فریم‌ورک‌ها را ببینید.

ری‌اکت

نصب

پکیج uplot-react را همراه با وابستگی uplot نصب کنید:

• با استفاده از npm: $ npm install uplot-react uplot
• با استفاده از yarn: $ yarn add uplot-react uplot

همچنین باید React نسخه ۱۶.۸ یا بالاتر را در پروژه خود نصب کرده باشید.

نحوه استفاده

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

دمو

دموی زنده را مشاهده کنید

همچنین می‌توانید برنامه‌ی دمو را به صورت محلی اجرا کنید:

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

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

دموی ReactJS

مثالی ساده برای شروع سریع. دموی ReactJS

Vue.js

نصب

پکیج uplot-vue را همراه با وابستگی uplot نصب کنید:

• با استفاده از npm: $ npm install uplot-vue uplot
• با استفاده از yarn: $ yarn add uplot-vue uplot

همچنین باید Vue.js را در شاخه پروژه خود نصب داشته باشید (هر دو نسخه ۲.۶ و ۳.x پشتیبانی می‌شوند).

نحوه استفاده

با استفاده از template

استفاده از 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) => {}}
            />
        );
    }
}

توجه: تغییر خصوصیت‌ها با Mutation پشتیبانی نمی‌شود به دلیل محدودیت Vue. شما باید یک کپی از خصوصیت ایجاد کنید، یعنی آن را جایگزین کنید. برای آشنایی بیشتر به این مثال مراجعه کنید.

دموی نمونه

دموی زنده Vue.js 2 را مشاهده کنید.

همچنین می‌توانید برنامه دموی نمونه را به صورت محلی اجرا کنید:

$ 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

نصب

پکیج uplot-svelte را همراه با وابستگی uplot نصب کنید:

• با استفاده از npm: $ npm install uplot-svelte uplot
• با استفاده از yarn: $ yarn add uplot-svelte uplot

همچنین لازم است Svelte در ساختار پروژه شما نصب شده باشد. کامپوننت UplotSvelte با پروژه‌های Svelte و SvelteKit سازگار است.

نحوه استفاده

دموی

نمونه مثال Svelte را ببینید

همچنین می‌توانید برنامه دموی را به صورت محلی اجرا کنید:

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

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

مستندات

| پارامتر | الزامی بودن | توضیحات | | :-------------: | :---------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | options | الزامی | گزینه‌های uPlot. به عنوان آرگومان اول به سازنده uPlot ارسال می‌شود: new uPlot(options) | | data | الزامی | داده‌های uPlot. به عنوان آرگومان دوم به سازنده uPlot ارسال می‌شود: new uPlot(options, data) | | target | اختیاری | عنصر html هدف برای uPlot. به عنوان آرگومان سوم به سازنده uPlot ارسال می‌شود: new uPlot(options, data, target) اگر هیچ مقدار هدفی در props ارسال نشود، یک عنصر div جدید به طور خودکار ساخته می‌شود | | onCreate | اختیاری | تابع callback که هنگام ایجاد یا بازسازی نمونه uPlot فراخوانی می‌شود | | onDelete | اختیاری | تابع callback که قبل از نابودی نمونه uPlot فراخوانی می‌شود، یا به دلیل تغییر زیاد props به حدی که بروزرسانی نمودار ممکن نیست یا به دلیل خارج شدن کامپوننت از DOM | | className/class | اختیاری | نام کلاس که به عنصر div هدف ساخته شده به طور خودکار اختصاص می‌یابد. زمانی که prop 'target' استفاده شود نام کلاس نادیده گرفته می‌شود. | | resetScales | اختیاری | فلگی برای کنترل بازنشانی مقیاس‌ها هنگام تغییر داده. مقدار پیش‌فرض true است. |

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