# چگونه چارچی‌های تعاملی را در NoteRich قرار دهیم داده‌ها تا حدی مهم هستند که به اندازه توانایی شما در درک آن‌ها بستگی دارند. در حوزه مدیریت دانش شخصی، تبدیل اعداد خام و داده‌های ساختارمند به بینش‌های بصری بسیار مهم است. **NoteRich** این فاصله بین متن و داده‌ها را پر می‌کند؛ زیرا به طور ذاتی از **Apache ECharts** پشتیبانی می‌کند و امکان قرار دادن نمودارهای تعاملی و آماده برای انتشار را در داخل یادداشت‌های شما فراهم می‌کند. برخلاف ابزارهای مبتنی بر ابر که داده‌های شما را برای رندر کردن به سرورهای خارجی ارسال می‌کنند، **NoteRich** نمودارهای **Apache ECharts** را کاملاً روی دستگاه محلی خود پردازش و رندر می‌کند. این امر تضمین می‌کند که داده‌های شخصی شما 100% محرمانه باقی بمانند و همچنین تجربه‌ای بصری تعاملی و بدون موانع فراهم شود. --- ## چرا باید از ECharts در NoteRich استفاده کنیم؟ **Apache ECharts** یک کتابخانه بصری متن‌باز است که به دلیل روانی، عمق و سازگاری با پلتفرم‌های مختلف شهرت دارد. با استفاده از **ECharts** به طور ذاتی، **NoteRich** چند مزیت مهم دارد: - **رندر کردن بدون نیاز به کد نوشتن**: تنها کافی است یک بخش کد **Markdown** را بنویسید و **NoteRich** آن را بلافاصله به یک نمودار تعاملی تبدیل کند. - **100% محلی و محرمانه**: موتور رندر کردن در مرورگر شما کاملاً روی دستگاه محلی اجرا می‌شود. داده‌های شما هرگز از دستگاه شما خارج نمی‌شوند. - **تعاملیت قوی**: می‌توانید از قابلیت‌های مختلفی مانند زوم کردن، حرکت کردن، نکته‌نویسی و تغییر رنگ نمودارها استفاده کنید، بدون اینکه حتی یک خط کد جاکتور را بنویسید. - **تولید داده‌ها توسط هوش مصنوعی**: **NoteRich** از هوش مصنوعی خود برای تحلیل جداول یا درخواست‌های زبان طبیعی شما استفاده می‌کند تا نمودارهای **JSON** را به صورت خودکار تولید کند. --- ## اصول پایه: قرار دادن اولین نمودار قرار دادن یک نمودار در **NoteRich** به همان سادگی نوشتن یک بخش کد **Markdown** است. فقط کافی است `echarts` را به عنوان شناسه زبان تعیین کنید و یک شیء **JSON** معتبر برای `option` نمودار تعیین کنید. ```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": ["یادداشت‌های ایجاد شده", "مجموع کلی"], "bottom": 0, "textStyle": { "color": "#666" } }, "xAxis": { "type": "category", "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], "axisLabel": { "color": "#666" } }, "yAxis": [ { "type": "value", "name": "روزانه", "splitLine": { "lineStyle": { "color": "#f4f4f5" } }, "axisLabel": { "color": "#666" } }, { "type": "value", "name": "مجموع کلی", "splitLine": { "show": false }, "axisLabel": { "color": "#666" } } ], "series": [ { "name": "یادداشت‌های ایجاد شده", "type": "bar", "data": [12, 18, 9, 22, 15, 30, 25], "itemStyle": { "color": "#eaeaea", "borderRadius": [4, 4, 0, 0] } }, { "name": "مجموع کلی", "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. نمودارهای دایره‌ای و دونات توصیف نسبت‌ها با استفاده از سری `pie` در **ECharts** بسیار ساده است. می‌توانید شعاع نمودار را طبق سلیقه خود تنظیم کنید تا نمودارهای دایره‌ای و دوناتی زیبا ایجاد کنید که با زیبایی **NoteRich** همخوانی داشته باشند. ```echarts { "tooltip": { "trigger": "item", "formatter": "{a} <br/>{b}: {c} ({d}%)" }, "legend": { "bottom": 0, "textStyle": { "color": "#666" } }, "series": [ { "name": "استفاده از فضای ذخیره‌سازی", "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": "یادداشت‌های متنی", "itemStyle": { "color": "#000" } }, { "value": 735, "name": "افزارهای ذخیره‌سازی", "itemStyle": { "color": "#666" } }, { "value": 580, "name": "پایگاه‌های داده", "itemStyle": { "color": "#eaeaea" } } ] } ] } ``` --- ## بصری‌سازی توسط هوش مصنوعی: از متن تا نمودار نوشتن **JSON** به صورت دستی کاربرد دارد، اما **NoteRich** این کار را با استفاده از **موتور بصری‌سازی محلی هوش مصنوعی** ارتقا می‌دهد. لازم نیست همیشه خودتان پیکربندی‌ها را بنویسید. ### توصیه‌های زبان طبیعی به نمودار می‌توانید به راحتی درباره نمودار مورد نظرتان در زبان ساده توصیف کنید و **LLM محلی **NoteRich** آن را به صورت خودکار به صورت **JSON** **ECharts** تولید خواهد کرد. مثال توصیه: "ایجاد یک نمودار رادار که ویژگی‌های **NoteRich**, **Notion**, و **Obsidian** را در زمینه حفاظت از حریم خصوصی، سرعت، پشتیبانی بدون اینترنت و قابلیت توسعه را مقایسه کند." ### تشخیص خودکار از جداول اگر یک جدول **Markdown** در یادداشت خود دارید، هوش مصنوعی **NoteRich** می‌تواند داده‌های ساختارمند را تحلیل کرده و پیکربندی **ECharts** مربوطه را به صورت خودکار پیشنهاد یا تولید کند. این تبدیل بدون موانع از داده‌های خام به بینش بصری کاملاً روی دستگاه شما انجام می‌شود و تضمین می‌کند که داده‌های تحلیلی شما کاملاً محرمانه باقی بمانند. --- ## عملکرد و بارگذاری آهسته یک نگرانی رایج در هنگام قرار دادن چندین نمودار تعاملی در یک سند، کاهش عملکرد است. **NoteRich** این مشکل را با استفاده از **معماری بارگذاری آهسته** حل می‌کند. 1. **نظارت بر تلاقی**: نمودارها تا زمانی که وارد صفحه نشوند، رندر نمی‌شوند. این کار باعث کاهش زمان بارگذاری اولیه سندهای طولانی می‌شود. 2. **صفحه‌های اسکلتی**: در حین بارگذاری یا مقداردهی نمودار، یک رابط کاربری سبک نمایش داده می‌شود تا از تغییرات در چیدمان صفحه جلوگیری شود و تجربه خواندن صاف حفظ شود. 3. **تغییر اندازه پاسخگویی**: **NoteRich** به طور خودکار یک **ResizeObserver** را به هر نمودار **ECharts** متصل می‌کند تا نمودارها بتوانند بدون دخالت دستی، با تغییرات اندازه پنجره یا تغییرات در نوار کنترل پاسخگویی داشته باشند. --- ## راهکارهای بهترین برای استفاده از **ECharts** در **NoteRich** برای بهره‌برداری حداکثری از **ECharts** در **NoteRich**，لطفاً این راهنمایی‌ها را در نظر بگیرید: - **کنترل صحیح JSON**: مطمئن شوید پیکربندی‌های شما از نظر **JSON** صحیح هستند. اگر سینتکس پیکربندی شما نادرست باشد، **NoteRich** یک پیام خطا را در ویرایوشنر نمایش می‌دهد تا از خروجی نرم‌افزاری خطاب‌شده جلوگیری کند. - **مطابقت با رنگ‌های **NoteRich**: رابط کاربری **NoteRich** سبک و تک‌رنگ است. از رنگ‌هایی مانند `#000` (رنگ اصلی)، `#666` (رنگ متن ثانویه) و `#eaeaea` (رنگ لبه‌ها/پس‌زمینه) در پیکربندی نمودارهای خود استفاده کنید تا هماهنگی بصری داشته باشد. - **استفاده از `grid` برای فاصله**: همیشه `grid` را تعیین کنید تا محورهای نمودار و عناوین آن‌ها دارای فاصله کافی باشند و از لبه‌های کانتینر محافظت شوند. - **استفاده از هوش مصنوعی محلی**: برای نمودارهای پیچیده، اجازه دهید هوش مصنوعی کارهای سخت را انجام دهد. می‌توانید همیشه JSON تولید شده را به صورت دستی تنظیم کنید تا تنظیم دقیق‌تری داشته باشید. --- ## نتیجه متصل کردن بصری‌سازی داده‌ها به فرآیند یادداشت خود، نیاز به تغییر بین ابزارهای خارجی مانند **Excel** یا **Tableau** را از بین می‌برد. با پشتیبانی از **ECharts** به طور ذاتی، **NoteRich** به شما این امکان را می‌دهد تا دانش مکانی خود را به یک داشبورد پویا، بصری و دارای بینش عمیق تبدیل کنید. این کار در حال حاضر با حفظ حریم خصوصی و فلسفه **Local-First** انجام می‌شود. امروز شروع به قرار دادن داده‌های خود کنید و ببینید یادداشت‌های شما چگونه زنده می‌شوند. --- <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]">به هوش مصنوعی مجهز</span> </div>