# كيفية إدراج الرسوم البيانية التفاعلية في NoteRich البيانات قيمتها تكمن في قدرتك على فهمها. في مجال إدارة المعرفة الشخصية، فإن تحويل الأرقام الخام والبيانات المنظمة إلى رؤى بصرية أمر بالغ الأهمية. **NoteRich** يساعد في سد الفجوة بين النصوص والبيانات من خلال دعم **Apache ECharts** بشكل أصيل، مما يسمح لك بإدراج رسوم بيانية تفاعلية للغاية، جاهزة للنشر، مباشرة داخل ملاحظاتك. على عكس الأدوات المبنية على السحابة التي ترسل بياناتك إلى خوادم خارجية لعرضها، فإن **NoteRich** تقوم بمعالجة رسوم **Apache ECharts** وتقديمها على الجهاز المحلي. هذا يضمن أن بياناتك الخاصة تظل سرية بنسبة 100%، مع توفير تجربة بصرية تفاعلية مثالية. --- ## لماذا ECharts في NoteRich؟ **Apache ECharts** هو مكتبة توضيحية مفتوحة المصدر، معروفة بسلاستها وتنوعها وتوافقها على جميع الأنظمة. من خلال دمج **ECharts** بشكل أصيل، يوفر **NoteRich** عدة مزايا متميزة: - **عرض بدون كود**: اكتب إعدادات JSON القياسية في كتلة كود من نوع Markdown، و**NoteRich** سيقوم بعرضها على شكل رسوم بيانية تفاعلية فورًا. - **100% محلي وخاص**: محرك العرض يعمل على الجهاز المحلي في المتصفح. بياناتك لا تغادر الجهاز أبدًا. - **تفاعل غني**: استمتع بإمكانية التكبير والتنقل والإشارات الإيضاحية وتغيير الخطوط دون الحاجة إلى كتابة سطر واحد من كود JavaScript. - **توليد بواسطة الذكاء الاصطناعي**: دع الذكاء الاصطناعي المحلي في **NoteRich** يحلل جداولك أو استفساراتك بلغة الطبيعة لإنتاج كود **ECharts** تلقائيًا. --- ## الأساسيات: إدراج أول رسم بياني لك إدراج رسم بياني في **NoteRich** أمر بسيط للغاية، فقط اكتب كتلة كود من نوع Markdown. كل ما عليك هو تحديد `echarts` كمعرف لغة وتقديم كائن **option** صالح لـ **ECharts** داخله. ```echarts { "title": { "text": "نمو الملاحظات المحلي الأولوية", "left": "center", "textStyle": { "color": "#000", "fontSize": 16 } }, "tooltip": { "trigger": "axis" }, "xAxis": { "type": "category", "data": ["يناير", "فبراير", "مارس", "أبريل", "مايو", "يونيو"], "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": ["الاثنين", "الثلاثاء", "الأربعاء", "الخميس", "الجمعة", "السبت", "الأحد"], "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** تقدم خدمة أفضل باستخدام **محرك التوضيح البصري المحلي بواسطة الذكاء الاصطناعي**. ليس من الضروري دائمًا كتابة الإعدادات بنفسك. ### النص إلى رسم بياني بلغة الطبيعة يمكنك ببساطة وصف الرسم البياني الذي ترغب فيه بلغة الطبيعة، وسيقوم الذكاء الاصطناعي المحلي في **NoteRich** بإنشاء كود **ECharts** لك. مثال على التوجيه: "إنشاء رسم بياني راداري يقارن بين ميزات **NoteRich**, **Notion**, و**Obsidian** من حيث الخصوصية، السرعة، الدعم الخارجي، والتوسع." ### الكشف التلقائي من الجداول إذا كان لديك جدول من نوع **Markdown** في ملاحظتك، فيمكن للذكاء الاصطناعي في **NoteRich** تحليل البيانات المنظمة وتقديم إعدادات **ECharts** المقابلة تلقائيًا. هذا الانتقال السلس من البيانات الخام إلى الرؤية البصرية يحدث بالكامل على الجهاز، مما يضمن أن بياناتك التحليلية تظل سريعة. --- ## الأداء وتحميل التقارير بشكل متقطع من المخاوف الشائعة عند إدراج رسوم بيانية تفاعلية متعددة في وثيقة واحدة هو الأداء. **NoteRich** يتعامل مع هذه المشكلة باستخدام **هيكل تحميل متقطع** مُحسّن للغاية. 1. **مراقب التقاطع**: لا يتم عرض الرسوم البيانية حتى تتم إعادةها إلى منطقة العرض. هذا يقلل بشكل كبير من وقت التحميل الأولي للوثائق الطويلة. 2. **شاشات الأساس**: أثناء تحميل الرسم البياني أو تهيئته، يتم عرض واجهة بسيطة لتجنب تغيير تخطيط الرسم البياني (CLS) والحفاظ على تجربة قراءة سلسة. 3. **تغيير الحجم بشكل متقطع**: **NoteRich** يقوم تلقائيًا بربط كل كائن **ECharts** بـ **ResizeObserver**، مما يضمن أن الرسوم البيانية تتكيف بشكل مثالي مع تغيير حجم النافذة أو تغييرها على جانب الشاشة دون الحاجة إلى تدخل يدوي. --- ## أفضل الممارسات لـ **NoteRich ECharts** للاستفادة القصوى من **ECharts** في **NoteRich**，تأكد من اتباع هذه النصائح: - **احرص على صحة كود **JSON**: تأكد من أن إعداداتك صالحة. **NoteRich** سيقوم بعرض رسالة خطأ في محرر الكود إذا كانت صياغته غير صحيحة، مما يمنع حدوث اختناقات في التطبيق. - **تطابق الأسلوب**: واجهة **NoteRich** بسيطة وعناصرها أحادية اللون. استخدم ألوانًا مثل `#000` (اللون الرئيسي)، `#666` (الخطوط الثانوية)، و `#eaeaea` (الحدود/الخلفية) في إعدادات الرسوم البيانية للحفاظ على التوافق البصري. - **استخدم **`grid` للتوسيع**: حدد دائمًا خاصية **grid** لضمان أن محاور الرسم البياني وخطوط التسمية لديها مساحة كافية ولم يتم قطعها من قبل الحواف الخارجية للوثيقة. - **استخدم الذكاء الاصطناعي المحلي**: للرسوم البيانية المعقدة، دع الذكاء الاصطناعي يحل المهام الصعبة. يمكنك دائمًا تعديل كود **JSON** المولد يدويًا للتحكم في الدقة. --- ## الخلاصة الدمج الفوري للتوضيح البياني للبيانات في عمليات تدوين الملاحظات يلغي الحاجة إلى التبديل بين الأدوات الخارجية مثل **Excel** أو **Tableau**. مع دعم **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]">مدعوم بذكاء اصطناعي</span> </div>