NoteRich میں انٹرایکٹو ECharts کیسے شامل کریں

# NoteRich میں انٹرایکٹو ECharts کو کیسے شامل کریں ڈیٹا کی قیمت صرف اس بات پر منحصر ہے کہ آپ اسے کس طرح سمجھتے ہیں۔ پرسنل نالی کینٹولم مینجمنٹ (PKM) کے میدان میں، خام اعداد و شمار اور ساختہ ڈیٹا کو بصری انداز میں تبدیل کرنا بہت اہم ہے۔ **NoteRich**، ٹیکسٹ اور ڈیٹا کے درمیان فاصلہ کو کم کرتا ہے، اور **Apache ECharts** کی مکمل سہولت فراہم کرتا ہے، جس سے آپ اپنی نوٹس میں بالکل انٹرایکٹو چارٹس شامل کر سکتے ہیں۔ کلاؤڈ بیسڈ ٹولز کے برعکس، جو آپ کے ڈیٹا کو بیرونی سرورز پر بھیجتے ہیں، **NoteRich** ECharts کو اپنے لوکل ڈیوائس پر ہی پروسس کرتا ہے۔ اس سے آپ کا ڈیٹا 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 پر مبنی بصری تجزیہ: ٹیکسٹ سے چارٹ تک JSN کو دستخط کرنا بہت مؤثر ہے، لیکن **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` پراڈکٹ کو متعین کریں، تاکہ آپ کے چارٹ کے ایکسس اور لیبلز کے لئے کافی جگہ رہے، اور وہ کنٹینر کی سائڈرز سے چپٹ ہو نہ جائیں۔ - **لوکل AI کا استعمال**: پیچیدہ چارٹس کے لئے، AI کو استعمال کریں۔ آپ ہمیشہ خود بخود بنائے گئے JSON کو ہینڈل کر سکتے ہیں، تاکہ بہترین کنٹرول حاصل کیا جا سکے۔ --- ## نتیجہ آپ کے نوٹ لینگ کی ورک فریم ورک میں انٹرایکٹو ڈیٹا ویژنلائزیشن کو براہ راست انٹیگریشن کرنے سے، آپ کو Excel یا Tableau جیسے بیرونی ٹولز کے ساتھ کنٹیکسٹ شیٹنگ کی ضرورت نہیں رہتی۔ **نیچرل ECharts** کی مکمل سہولت کے ساتھ، **NoteRich** آپ کو اپنے لوکل کنافیگیٹڈ بیس کو ڈومینیک، بصری، اور گہری بصری ڈیشبار میں تبدیل کرنے کی سہولت دیتا ہے – اور یہ سب، آپ کی پرائیویسی اور لوکل-فرسٹ فلسفہ کے مطابق ہے۔ آج سے اپنے ڈیٹا کو انٹیگر کریں، اور دیکھیں کہ آپ کے نوٹ کیسے زندہ ہو جاتے ہیں۔