أغلفة uPlot

مجموعة من أغلفة uPlot التي تتيح لك العمل مع المخططات بشكل إعلاني داخل إطار العمل المفضل لديك.

جدول المحتويات

• الدوافع
• البدء السريع
• React
• التثبيت
• كيفية الاستخدام
• عرض توضيحي
• Vue.js
• التثبيت
• كيفية الاستخدام
• عرض توضيحي
• Svelte
• التثبيت
• كيفية الاستخدام
• عرض توضيحي
• التوثيق

الدافع

بينما توجد بالفعل العديد من الأغلفة الأخرى لـ uPlot، جميعها تعاني من واحدة من القيود التالية:

• يقومون بإنشاء كائن uPlot مرة واحدة فقط، أثناء مرحلة تثبيت المكون، ويتوقعون منك إدارة كل منطق التحديث بنفسك.
• يقومون بإعادة إنشاء كائن uPlot من جديد في كل مرة تتغير فيها الخصائص، حتى لو كان بالإمكان تحديث الكائن ليعكس التغييرات.

بالمقارنة، يحاول هذا المكتبة جاهداً عدم إعادة إنشاء كائن uPlot عندما تتغير الخصائص. بدلاً من إعادة الإنشاء، تحاول استخدام واجهة برمجة التطبيقات العامة لـ uPlot لإبقائه محدثاً مع الخصائص.

البدء

انظر إلى أقسام React، Vue.js أو Svelte أدناه حسب الإطار الذي تستخدمه. راجع أيضاً التوثيق الخاص بواجهة البرمجة والمشترك بين جميع الأطر.

React

التثبيت

قم بتثبيت حزمة uplot-react مع الاعتماد على uplot:

• باستخدام npm: $ npm install uplot-react uplot
• باستخدام yarn: $ yarn add uplot-react uplot

تحتاج أيضاً إلى تثبيت React 16.8 أو أعلى ضمن شجرة مشروعك.

كيفية الاستخدام

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 ضمن شجرة مشروعك (يتم دعم الإصدارات 2.6 و 3.x معًا).

كيفية الاستخدام

باستخدام القالب

استخدام 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) => {}}
            />
        );
    }
}

ملاحظة: تغييرات الخاصية عن طريق التحوير غير مدعومة بسبب محدودية 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

سـفلت

التثبيت

ثبت حزمة 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) سيتم إنشاء عنصر div جديد تلقائيًا إذا لم يتم تمرير أي عنصر في الخصائص | | onCreate | اختياري | دالة رد نداء، تُستدعى عند إنشاء أو إعادة إنشاء مثيل uPlot | | onDelete | اختياري | دالة رد نداء، تُستدعى قبل أن يتم تدمير مثيل uPlot، إما بسبب تغير الخصائص بشكل كبير بحيث يستحيل تحديث المخطط أو لأن المكون على وشك أن يُزال | | className/class | اختياري | اسم فئة يتم تمريره إلى عنصر div المستهدف الذي تم إنشاؤه تلقائيًا. يتم تجاهل اسم الفئة عندما يُستخدم خاصية 'target'. | | resetScales | اختياري | علامة تتحكم فيما إذا كان سيتم إعادة تعيين المقاييس عند تغيير البيانات. القيمة الافتراضية هي true. |

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