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` ને લેંગ્વેજ આઇડેન્ટિફાયર તરીકે દર્શાવવું જરૂરી છે, અને માન્ય ECharts `option` JSON ઓબ્જેક્ટ આપવું જરૂરી છે. ```echarts { "title": { "text": "Local-First Note Growth", "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** તેને આગળ વધારે છે. તમારે હંમેશા કન્ફિગરેશન લખવાની જરૂર નથી. ### નેચરલ લેંગ્વેજથી ચાર્ટ સુધી તમે સરળ અંગ્રેજીમાં ચાર્ટ વિશે વર્ણન કરી શકો છો, અને **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ને મેન્યુઅલી સુધારી શકો. --- ## નિષ્કર્ષ ઇન્ટરેક્ટિવ ડેટા વિઝ્યુઅલાઇઝેશનને તમારી નોટ્સ વર્કફોલોમાં સીધું ઇમ્બેડ કરવાથી, એક્સેલ અથવા ટેબ્યુલા જેવા બહારના સાધનો વચ્ચે કન્ટેક્સ્ટ શિફ્ટ કરવાની જરૂર રહેતી નથી. **અંતર્ગત **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>