Noterich இல் ஊடாடும் ECharts ஐ எவ்வாறு உட்பொதிவது

# NoteRich में இண்டராக்டிவ் ECharts ஐ எவ்வாறு சேர்ப்பது தரவுகள், அவற்றைப் புரிந்துகொள்ளும் உங்கள் திறனுக்கு ஏற்ப மதிப்புள்ளவை. தனிப்பட்ட அறிவு நிர்வாகத்தின் உலகில், கசப்பான எண்களையும், அமைப்புப் படுத்தப்பட்ட தரவுகளையும் காட்சிமயமாக மாற்றுவது மிக முக்கியம். **NoteRich**, **Apache ECharts** ஐ இயன்படுத்துவதன் மூலம், உரை மற்றும் தரவுகளுக்கு இடையிலான இடைவெளியைக் குறைக்கிறது. இதன் மூலம், உங்கள் குறிப்புகளுக்குள்ளேயே இண்டராக்டிவ், பதிப்புக்குத் தயாரான சார்டுகளை சேர்க்க முடியும். கண்ணாடி-அடிப்படையிலான கருவிகளில், உங்கள் தரவுகளை வெளிப்புற சர்வர்களுக்கு அனுப்பி அவற்றை ரெண்டரில் வைக்கும் போது, **NoteRich** முழுமையாக உங்கள் லோக்கல் சாதனத்திலேயே **ECharts** ஐ ரெண்டரில் வைக்கிறது. இதன் மூலம், உங்கள் தனியுரிமை கொண்ட தரவுகள் 100% பாதுகாக்கப்படுகின்றன, மேலும், இண்டராக்டிவ் காட்சிமயமாக்கல் அனுபவம் வழங்கப்படுகிறது. --- ## **NoteRich-ல் ECharts ஏன்?** **Apache ECharts**, ஒரு திறமையான காட்சிமயமாக்கும் நூலகம். இது, இயல்பான திறன், ஆழம் மற்றும் பிளாட்ஃபார்ம்களுக்கு இடையிலான ஒருங்கிணைப்பை வழங்குகிறது. **NoteRich**, **ECharts** ஐ இயன்படுத்துவதன் மூலம், பல நன்மைகளை வழங்குகிறது: - **ஜீரோ-கோட் ரெண்டரிங்**: மார்கன் கோட் பிளாக்கில் சாதாரண JSON கட்டமைப்பை எழுதுங்கள்; **NoteRich** அதை உடனே இண்டராக்டிவ் சார்டாக மாற்றும். - **100% லோக்கல் & பிரைவேட்**: ரெண்டரிங் இயந்திரம் உங்கள் ப்ராசஸரில் லோக்கலாக இயங்குகிறது. உங்கள் தரவுகள் உங்கள் சாதனத்திலிருந்து எப்போதும் வெளியே செல்லாது. - **ரிச்சவர்ட் இண்டராக்டிவ்**: ஜாப், பேனிங், டூல்பிட்ஸ் மற்றும் லெஜண்ட் டவுலிங் ஆகியவற்றை இலவசமாகப் பயன்படுத்தலாம். ஜாவர்ஸ்கிப் ஜாவர்ஸ்கிப் எழுதாமலேயே. - **AI-பவுண்டேடெட் ஜெனரேஷன்**: **NoteRich** இன் லோக்கல் AI, உங்கள் டேபிள்களை அல்லது இயற்கை மொழியை ஆய்வு செய்து, **ECharts** JSON ஐ தானாகவே உருவாக்கும். --- ## **அடிப்படை: உங்கள் முதல் சார்ட்டை சேர்ப்பது** **NoteRich-ல்** ஒரு சார்ட்டை சேர்ப்பது, மார்கன் கோட் பிளாக்கை எழுதுவதைப் போலவே எளிமையானது. `echarts` என்பதை மொழியாக இறக்கும்போது, **NoteRich** உடனே அதை இண்டராக்டிவ் சார்டாக மாற்றும். ```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` அரேயில் பல வகையான சார்ட்களை இணைக்கலாம். உதாரணமாக, ஒரு லைன் சார்ட்டை பார் சார்ட்டின் மேல் இணைக்கலாம். ```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` சீரிஸ் மூலம், விகிதங்களை காட்சிமயமாக்கலாம். உங்கள் சார்ட்டை அழகாக மாற்றுவதற்கு, ரேடியம் அளவை மாற்றலாம். ```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` ப்ராபர்பர் பொதுவாக இருக்க வேண்டும். இதனால், உங்கள் சார்டின் அக்ஸஸ்கள் மற்றும் லேபில்களுக்கு போதுமான இடம் இருக்கும். - **லோக்கல் AI பயன்படுத்துதல்**: சிக்கலான சார்ட்களுக்கு, AI-ஐ பயன்படுத்துங்கள். உங்கள் ஜெனரேஷன்களை தனிப்பட்ட முறையில் மாற்றலாம். --- ## **கருத்துரை** உங்கள் குறிப்புகளுக்குள் இண்டராக்டிவ் டேட்டா விசுவலைமயமாக்கலை இணைப்பது, எக்ஸெல் அல்லது டேப்வாவ் போன்ற வெளிப்புற கருவிகளில் இடப்பெயர்வை தேவையற்றதாக மாற்றுகிறது. **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>