uPlot रैपर्स

uPlot रैपर्स का एक संग्रह जो आपको अपने पसंदीदा फ्रेमवर्क के अंदर चार्ट्स के साथ घोषणात्मक रूप से काम करने की सुविधा देता है।

सामग्री सूची

• प्रेरणा
• शुरुआत करें
• React
• इंस्टॉलेशन
• कैसे उपयोग करें
• डेमो
• Vue.js
• इंस्टॉलेशन
• कैसे उपयोग करें
• डेमो
• Svelte
• इंस्टॉलेशन
• कैसे उपयोग करें
• डेमो
• डॉक्युमेंटेशन

उद्देश्य

हालाँकि कई अन्य uPlot रैपर पहले से मौजूद हैं, उनमें से सभी में निम्नलिखित सीमाएं होती हैं:

• वे uPlot इंस्टेंस को एक बार बनाते हैं, जब कंपोनेंट माउंट होता है, और उम्मीद करते हैं कि आप खुद ही सारी अपडेट लॉजिक संभालें।
• वे हर बार जब props बदलते हैं तो uPlot इंस्टेंस को फिर से बनाते हैं, चाहे इंस्टेंस को अपडेट कर के बदलाव दर्शाए जा सकते हों।

इसके विपरीत, यह लाइब्रेरी props बदलने पर uPlot इंस्टेंस को फिर से बनाने से बचने की पूरी कोशिश करती है। रीक्रिएशन की बजाय यह uPlot की सार्वजनिक API का उपयोग करके उसे props के अनुसार अपडेट रखने की कोशिश करती है।

प्रारंभ करना

नीचे दिए गए React, Vue.js या Svelte सेक्शन देखें, यह निर्भर करता है कि आप कौन सा फ्रेमवर्क उपयोग कर रहे हैं। सभी फ्रेमवर्क के लिए सामान्य API डॉक्युमेंटेशन भी देखें।

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 निर्भरता के साथ uplot-vue पैकेज इंस्टॉल करें:

• 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

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 | वैकल्पिक | uPlot के लिए लक्ष्य html तत्व। uPlot कंस्ट्रक्टर को तीसरे तर्क के रूप में पास किए जाते हैं: new uPlot(options, data, target) अगर props में कोई target नहीं दिया गया है तो एक नया div तत्व स्वचालित रूप से बनाया जाएगा | | onCreate | वैकल्पिक | कॉलबैक फंक्शन, जो uPlot इंस्टेंस के निर्माण या पुनर्निर्माण पर कॉल किया जाता है | | onDelete | वैकल्पिक | कॉलबैक फंक्शन, जो uPlot इंस्टेंस के नष्ट होने से पहले कॉल किया जाता है, या तो props में इतना बदलाव हो गया हो कि चार्ट अपडेट करना संभव न हो या कंपोनेंट अनमाउंट होने वाला हो | | className/class | वैकल्पिक | एक क्लास नाम जो स्वचालित रूप से बनाए गए target div तत्व को दिया जाता है। जब 'target' prop का उपयोग किया जाता है तो क्लास नाम नजरअंदाज किया जाता है। | | resetScales | वैकल्पिक | डेटा परिवर्तन पर स्केल्स को रीसेट करने का फ्लैग। डिफ़ॉल्ट true है। |

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