NoteRich में इंटरैक्टिव ECharts कैसे एम्बेड करें

# NoteRich में इंटरैक्टिव ECharts को कैसे एम्बेड करें डेटा की महत्वता इस बात पर निर्भर करती है कि आप उसे समझने की क्षमता क्या है। व्यक्तिगत ज्ञान प्रबंधन के क्षेत्र में, कच्चे आंकड़ों एवं संरचित डेटा को दृश्यमान जानकारी में बदलना बहुत महत्वपूर्ण है। **NoteRich**, **Apache ECharts** का स्वदेशी समर्थन करके, टेक्स्ट एवं डेटा के बीच की खाई को पाटता है, जिससे आप अपनी नोट्स में पूरी तरह से इंटरैक्टिव चार्टों को एम्बेड कर सकते हैं। क्लाउड-आधारित टूलों के विपरीत, **NoteRich** अपने डेटा को स्थानीय डिवाइस पर ही प्रसंस्करण करता है। इससे आपका डेटा 100% गोपनीय रहता है, एवं आपको बिना किसी रुकावट के इंटरैक्टिव दृश्यमानता अनुभव मिलता है। --- ## **NoteRich में ECharts क्यों?** **Apache ECharts** एक ओपन-सोर्स विज़ुअलाइज़ेशन लाइब्रेरी है, जिसकी प्रसिद्धियाँ गतिशीलता, गहराई एवं क्लाउड-आधारित समर्थन हैं। **NoteRich** में **ECharts** को स्वदेशी रूप से एकीकृत करके, कई विशेष फायदे प्रदान किए गए हैं: - **शून्य-कोड रेंडरिंग**: मार्कआउट कोड ब्लॉक में सामान्य JSON कॉन्फ़िगरेशन लिखें, एवं **NoteRich** उसे तुरंत इंटरैक्टिव चार्ट में रूपांतरित कर देगा। - **100% स्थानीय एवं गोपनीयता**: रेंडरिंग इंजन स्थानीय ब्राउज़र में चलता है। आपका डेटा कभी भी आपके डिवाइस से बाहर नहीं जाता। - **अत्यधिक इंटरैक्टिविटी**: ज़ूम, पैनिंग, टूलटैप एवं लेजेंड टॉगल जैसी सुविधाएँ बिना किसी जावास्क्रिप्ट लिखे ही उपलब्ध हैं। - **AI-संचालित जनरेशन**: **NoteRich** के स्थानीय AI आपकी टेबलों या प्राकृतिक भाषा के निर्देशों का विश्लेषण करके **ECharts** JSON को स्वचालित रूप से जनरेट कर देगा। --- ## **बुनियादी बातें: अपने पहले चार्ट को एम्बेड करना** **NoteRich** में चार्ट को एम्बेड करना बहुत ही सरल है। आपको केवल `echarts` को भाषा आइडेंटिफायर के रूप में निर्दिष्ट करना है, एवं वैध **ECharts** `option` JSON ऑब्जेक्ट देना है। ```echarts { "title": { "text": "लोकल-फर्स्ट नोट ग्रोथ", "left": "center", "textStyle": { "color": "#000", "fontSize": 16 } }, "tooltip": { "trigger": "axis" }, "xAxis": { "type": "category", "data": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], "axisLabel": { "color": "#666" } }, "yAxis": { "type": "value", "splitLine": { "lineStyle": { "color": "#f4f4f5" } }, "axisLabel": { "color": "#666" } }, "series": [ { "data": [120, 200, 150, 80, 70, 110], "type": "bar", "itemStyle": { "color": "#000", "borderRadius": [4, 4, 0, 0] } } ], "grid": { "left": "10%", "right": "10%", "bottom": "15%" } } ``` जब आप **प्रीव्यू मोड** में जाते हैं, या नोट को पढ़ते हैं, तो **NoteRich** का रेंडरिंग इंजन `echarts` ब्लॉक को प्रतिबंधित करता है, **ECharts** इंस्टेंशन को इनिशियलाइज़ करता है, एवं उसे DOM से जोड़ता है, जिससे चार्ट को स्वचालित रूप से आकार दिया जा सकता है। --- ## **गहराई से जानना: उन्नत चार्ट कॉन्फ़िगरेशन** जब आप बुनियादी बातों को सीख जाते हैं, तो आप **ECharts** की पूरी शक्ति का उपयोग करके जटिल, बहु-आयामी विज़ुअलाइज़ेशन बना सकते हैं। ### 1. मल्टी-सीरीज़ एवं मिक्स्ड चार्ट्स आप विभिन्न चार्ट प्रकारों को आसानी से जोड़ सकते हैं, जैसे कि एक लाइन चार्ट को बार चार्ट पर ओवरले करना। इसके लिए `series` सरणी में कई ऑब्जेक्ट्स परिभाषित करें, एवं दो Y-अक्षों का उपयोग करें। ```echarts { "tooltip": { "trigger": "axis", "axisPointer": { "type": "cross" } }, "legend": { "data": ["Notes Created", "Cumulative Total"], "bottom": 0, "textStyle": { "color": "#666" } }, "xAxis": { "type": "category", "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], "axisLabel": { "color": "#666" } }, "yAxis": [ { "type": "value", "name": "Daily", "splitLine": { "lineStyle": { "color": "#f4f4f5" } }, "axisLabel": { "color": "#666" } }, { "type": "value", "name": "Total", "splitLine": { "show": false }, "axisLabel": { "color": "#666" } } ], "series": [ { "name": "Notes Created", "type": "bar", "data": [12, 18, 9, 22, 15, 30, 25], "itemStyle": { "color": "#eaeaea", "borderRadius": [4, 4, 0, 0] } }, { "name": "Cumulative Total", "type": "line", "yAxisIndex": 1, "smooth": true, "data": [120, 138, 147, 169, 184, 214, 239], "lineStyle": { "color": "#000", "width": 3 }, "itemStyle": { "color": "#000" } } ], "grid": { "left": "10%", "right": "10%", "bottom": "15%" } } ``` ### 2. पाइ एवं डोनट चार्ट्स प्रमाणनों को विज़ुअलाइज़ करना **ECharts** के `pie` सीरीज़ के साथ बहुत ही सरल है। आप रेडियस को कस्टमाइज़ करके शानदार डोनट चार्ट बना सकते हैं, जो **NoteRich** की मिनिमलिस्टिक शैली के अनुरूप हों। ```echarts { "tooltip": { "trigger": "item", "formatter": "{a} <br/>{b}: {c} ({d}%)" }, "legend": { "bottom": 0, "textStyle": { "color": "#666" } }, "series": [ { "name": "Storage Usage", "type": "pie", "radius": ["40%", "70%"], "avoidLabelOverlap": false, "itemStyle": { "borderRadius": 10, "borderColor": "#fff", "borderWidth": 2 }, "label": { "show": false, "position": "center" }, "emphasis": { "label": { "show": true, "fontSize": 20, "fontWeight": "bold", "color": "#000" } }, "data": [ { "value": 1048, "name": "Text Notes", "itemStyle": { "color": "#000" } }, { "value": 735, "name": "Attachments", "itemStyle": { "color": "#666" } }, { "value": 580, "name": "Databases", "itemStyle": { "color": "#eaeaea" } } ] } ] } ``` --- ## **AI-संचालित विज़ुअलाइज़ेशन: टेक्स्ट से चार्ट तक** JSON को मैनुअली लिखना बहुत ही शक्तिशाली है, लेकिन **NoteRich** इसे और आगे ले जाता है, जिसमें **स्थानीय AI विज़ुअलाइज़ेशन इंजन** है। आपको हमेशा खुद कॉन्फ़िगरेशन लिखने की आवश्यकता नहीं है। ### प्राकृतिक भाषा से चार्ट तक आप सरल अंग्रेजी में चार्ट का वर्णन कर सकते हैं, एवं **NoteRich** का स्थानीय LLM आपके लिए **ECharts** JSON जनरेट कर देगा। *उदाहरण प्रशंसा: “NoteRich, Notion, एवं Obsidian की प्रतिबंध, गति, ऑफलाइन सहायता, एवं विस्तारशीलता के आधार पर विशेषताओं का मापन करने वाला एक रडार चार्ट बनाएं।”* ### टेबलों से स्वचालित पहचान यदि आपकी नोट में मार्कआउट टेबल है, तो **NoteRich** का AI संरचित डेटा का विश्लेषण करके संबंधित **ECharts** कॉन्फ़िगरेशन स्वचालित रूप से सुझाएगा। यह स्वचालित रूप से कच्चे डेटा से दृश्यमान जानकारी तक पहुँचने का तरीका है, जो आपके डेटा की गोपनीयता की रक्षा करता है। --- ## **प्रदर्शन एवं धीमी रेंडरिंग** एक ही दस्तावेज़ में कई इंटरैक्टिव चार्टों को एम्बेड करने पर प्रदर्शन एक सामान्य चिंता है। **NoteRich** इसे एक अत्यधिक अनुकूलित **लेज़ी लोडिंग आर्किटेक्चर** के साथ हल करता है। 1. **इक्सेशन ऑब्जर्वर**: चार्टों को विंडो के व्यूपोर्ट में आने तक रेंडर नहीं किया जाता। इससे लंबे दस्तावेज़ों के प्रारंभिक लोडिंग समय कम हो जाता है। 2. **स्केलटन स्क्रीन**: जब चार्ट रेंडर हो रहा है, या इनिशियलाइज़ हो रहा है, तब हल्का सा स्केलटन यूआइ को दिखाया जाता है, जिससे लेआउट शिफ्ट कम होता है एवं सुविधाजनक पठन अनुभव बनता है। 3. **रिस्पॉन्सिव रिसाइज़िंग**: **NoteRich** हर **ECharts** इंस्टेंशन के साथ `ResizeObserver` को स्वचालित रूप से जोड़ता है, जिससे चार्ट विंडो के आकार बदलने या साइडबार टॉगलिंग के साथ बिना मैनुअल हस्तक्षेप के अनुकूलित हो जाता है। --- ## **NoteRich ECharts के लिए सर्वोत्तम प्रथाएँ** **NoteRich** में **ECharts** का अधिकतम उपयोग करने के लिए, निम्नलिखित सुझावों का ध्यान रखें: - **वैध JSON रखें**: अपनी कॉन्फ़िगरेशन वैध JSON होनी चाहिए। यदि सिंटैक्स गलत है, तो **NoteRich** एडिटर में त्रुटि संदेश दिखाएगा, जिससे ऐप क्रैश होने से बचा जा सकेगा। - **थीम के अनुरूप हो**: **NoteRich** का यूआइ बहुत ही मिनिमलिस्टिक एवं मोनोक्रोमैटिक है। अपने चार्ट कॉन्फ़िगरेशन में `#000` (प्राथमिक रंग), `#666` (द्वितीयक टेक्स्ट रंग), एवं `#eaeaea` (बॉर्डर/बैकग्राउंड रंग) का उपयोग करें, ताकि दृश्य सामंजस्य बना रहे। - **`grid` का उपयोग करें**: हमेशा `grid` प्रॉपर्टी को परिभाषित करें, ताकि आपके चार्ट के अक्ष एवं लेबलों के लिए पर्याप्त जगह रहे, एवं वे कंटेनर के किनारों से चिपके नहीं। - **स्थानीय AI का उपयोग करें**: जटिल चार्टों के लिए, AI को भारी कार्य करने दें। आप हमेशा जनरेट किए गए JSON को मैनुअली समायोजित कर सकते हैं। --- ## **निष्कर्ष** इंटरैक्टिव डेटा विज़ुअलाइज़ेशन को अपनी नोट लेने की प्रक्रिया में सीधे एम्बेड करने से, आपको एक्सेल या टेब्यूल जैसे बाहरी टूलों के साथ संचार बदलने की आवश्यकता नहीं रह जाती। **Native ECharts** समर्थन के साथ, **NoteRich** आपको अपनी स्थानीय ज्ञान-बेस को एक डायनामिक, दृश्यमान, एवं गहराई से विश्लेषण योग्य डैशबोर्ड में बदलने में मदद करता है… जबकि गोपनीयता एवं स्थानीय-फर्स्ट दृष्टिकोण बना रहता है। आज ही अपने डेटा को एम्बेड करना शुरू करें… आपकी नोटें जीवंत हो जाएँगी। --- <div class="flex flex-wrap gap-2 mt-8 mb-12"> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">ECharts</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">डेटा विज़ुअलाइज़ेशन</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">लोकल-फर्स्ट</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">AI-संचालित</span> </div>