مكتبات مخططات JavaScript: 13 خيارًا شائعًا

# 1 - Chart.js

Chart.js هي مكتبة رسوم بيانية عملية تستخدم <canvas> الخاص بـ HTML5 لعرض المخططات.

المكتبة هي الخيار الأفضل بسهولة للمشاريع البسيطة ، لأسباب مثل أنها تستجيب بشكل افتراضي ، ويمكنك أيضًا تطبيق تأثيرات الرسوم المتحركة بناءً على سلوك المستخدم.

فيما يلي 8 أنواع من المخططات التي يمكنك إنشاؤها باستخدام Chart.js:

• مخطط المنطقة
• شريط الرسم البياني
• مخطط فقاعي
• المخططات الدائرية والدائرية المجوفة
• خط الرسم البياني
• أنواع المخططات المختلطة
• مخطط المنطقة القطبية
• مخطط نسيجي

بقدر ما تذهب سهولة الاستخدام ، فإن بناء الجملة بسيط ، وحتى إذا لم تكن قد عملت مع JavaScript من قبل ، فإن إنشاء مخطط جديد يكون أمرًا سهلاً.

 const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };

إذا كنت ترغب في توسيع المخططات بوظائف ديناميكية وتجميع البيانات ، فإن المكتبة لديها نظام ملحقات يمكنك استخدامه لإضافة وظائف جديدة.

مثال Chart.js

راجع إثبات المفهوم بالقلم: Chart.js مع تدرج الخلفية بواسطة Sven (hofmannsven) على CodePen.

Chart.js موارد إضافية

• Chart.js + Next.js = لوحات معلومات جميلة تستند إلى البيانات
• الابتداء مع Chart.js ؛ التعلم القائم على المهام

# 2 - D3.js

اسمحوا لي أن أبدأ بالقول إن D3 هي أداة تصور البيانات وليست مكتبة رسوم بيانية تقليدية.

تتيح لك D3 تحديد مجموعة بيانات وربطها بـ DOM ، وبعد ذلك يمكنك استخدام وظائف المكتبات لتحويل تلك البيانات إلى تمثيل مرئي فريد. بالنسبة إلى العرض المرئي ، تستفيد D3 من جداول HTML و SVG و <canvas> لعرض البيانات على الصفحة.

إذا سبق لك أن رأيت واحدة من تلك الكرات الأرضية التي تدور على أساس جغرافي مع نقاط بيانات تفاعلية متعددة عليها ، فمن المحتمل أن يكون هذا العرض التقديمي قد تم إنشاؤه باستخدام D3. ومع ذلك ، فهو يعمل جيدًا للاستخدامات العملية أيضًا ، مثل الرسم البياني الأساسي الذي يمكنك رؤيته في العرض التوضيحي أدناه. في النهاية ، سترغب في الرجوع إلى قسم البرامج التعليمية الرسمية لـ D3 لاستكشاف إمكاناتها الأكثر تعقيدًا.

مثال D3.js

راجع مخطط Pen D3 + ReactJS بواسطة Web Dev (ronaldmarin) على CodePen.

D3.js موارد إضافية

• البرنامج التعليمي D3.js
• إنشاء خريطة التمثيل اللوني لتقويم D3.js

# 3 - اباتشي ECharts

أحد أسباب شهرة Apache ECharts هو أنه يمكنك الوصول إلى مئات من أمثلة الرسوم البيانية المعدة مسبقًا بشكل مباشر. يمكنك التحقق من ذلك بنفسك من خلال زيارة دليل الأمثلة. تغطي هذه الصفحة مخططات وأمثلة في فئات مثل الخطوط والأشرطة والمخططات الدائرية والمخططات المبعثرة والخرائط الحرارية والرسوم البيانية وغير ذلك الكثير.

ويحتوي كل مثال على أمثلة على كود JavaScript و TypeScript. لكن هذا ليس كل شيء ، فهناك بعض الفوائد الواقعية لاستخدام هذه المكتبة. فيما يلي عدد قليل منهم:

• تدفق البيانات. هل تريد إنشاء مخططات تفاعلية بملايين نقاط البيانات؟ تستخدم ECharts WebSockets لدفق البيانات بحيث يمكن تحميلها بشكل غير متزامن حتى مع مجموعات البيانات الكبيرة للغاية.
• متوافق مع الجوال. عندما يشاهد المستخدمون EChart على أجهزتهم المحمولة ، فقد تم تحسين المخطط نفسه لتوفير ميزات تفاعلية - التكبير والتحريك وعرض SVG لضمان أفضل إمكانية للتسليم.
• البيانات الديناميكية. يمكنك تغذية ECharts عدة نقاط بيانات (منفصلة) ، وستقوم المكتبة تلقائيًا بتحريك المخطط لمنح المستخدمين تجربة تفاعلية.
• إمكانية الوصول. تم تصميم Apache ECharts (الإصدار 4.0 وما بعده) لاتباع إرشادات WAI-ARIA.

يمكنك أيضًا عرض الرسوم البيانية الخاصة بك على موقع الويب الخاص بك باستخدام CDN خارجي.

مثال اباتشي ECharts

شاهد مثال Pen Apache Echart بواسطة Vale (vsigno) على CodePen.

Apache ECharts موارد إضافية

• قم ببناء أداة GitHub Insight أفضل في أسبوع

# 4 - مؤامرة

Plotly هي الشركة الأم لـ Dash ، وهو حل منخفض التعليمات البرمجية لنشر تطبيقات البيانات. ويقومون بتطوير مكتبة الرسوم البيانية الخاصة بهم - Plotly - في المبنى.

باستخدام Plotly ، يمكنك إنشاء أبسط تصورات المخططات ، لكن القوة الحقيقية للمكتبة تكمن في القدرة على إنتاج مخططات قائمة على الإحصائيات ، وتمثيلات بيانات ثلاثية الأبعاد ، ومخططات بناءً على البيانات المالية.

إنه متاح كوحدة Node.js ، ولكن يمكن استخدامه أيضًا مباشرة من CDN.

مثال مؤامرة

راجع التعليق التوضيحي Pen Add على حدث click بواسطة plotly (plotly) على CodePen.

# 5 - فرابيه

تم إنشاء مكتبة مخططات Frappe بواسطة الأشخاص الذين قاموا بإنشاء Frappe Framework. هذه المكتبة بسيطة بقدر ما تحصل عليها. وهذه البساطة هي عامل مساهم رئيسي في شعبية المكتبة.

لا تتطلب المكتبة أي تبعيات خارجية ويمكنها تقديم مخططات SVG سهلة الاستخدام في بضعة أسطر من التعليمات البرمجية. فيما يلي مثال على رمز لمخطط المحور الأساسي:

 data = { labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], datasets: [ { values: [18, 40, 30, 35, 8, 52, 17, -4] } ] } new frappe.Chart( "#chart", { data: data, type: 'bar', height: 180, colors: ['red'] });

وسيترجم هذا المقتطف الصغير إلى مخطط مثل هذا:

هناك أيضًا دعم للمخططات المختلطة (مخططات متعددة في واحد) ، والتعليقات التوضيحية ، وخرائط الحرارة ، وواجهة برمجة التطبيقات متاحة إذا كنت تخطط لتحديث البيانات في الوقت الفعلي ، أو تصديرها.

مثال Frappe

شاهد القلم Frappe Hello World بقلم Jang Rush (weakish) على CodePen.

# 6 - أبيكسشارتس

ApexCharts هي مكتبة رسوم بيانية تقليدية إلى حد كبير. الفرق الرئيسي بين ApexCharts و Frappe (على سبيل المثال) هو أن ApexCharts يوفر عروض توضيحية أكثر قليلاً. ولكن ، أيضًا ، يقدم دعمًا محليًا لأطر العمل الشائعة مثل React و Vue و Angular. هذا يعني أيضًا أن جميع المخططات التجريبية تحتوي على عينات خاصة بها مكتوبة في بناء جملة الأطر المذكورة.

بالنسبة إلى الميزات ، يتم إنشاء جميع المخططات بتنسيق SVG وتكون متوافقة مع الجوّال افتراضيًا. يمكنك أيضًا الاستفادة من ميزات مثل الرسوم المتحركة السلسة والتعليقات التوضيحية ، وتخصيص لوحة سمات الرسم البياني عن طريق اختيار أحد أنماط النماذج العشرة.

مثال على مخططات ApexCharts

شاهد لوحة القلم في الوقت الفعلي بواسطة ApexCharts (apexcharts) على CodePen.

# 7 - G2

لقد تحدثت مؤخرًا عن Ant Design في عدة مناسبات ، بما في ذلك مقالاتي حول مكتبات المكونات لـ React.js و Vue. لا تحظى Ant بشعبية كبيرة على GitHub فحسب ، بل إن المجتمعات تحبها في جميع مناطق العالم.

ومكتبة الرسوم البيانية G2 (أو كما يطلقون عليها "قواعد التصور") هي تنفيذ Ant Design لنظام الرسوم البيانية باستخدام نظام تصميم Ant. أوصي بشدة بمراجعة صفحة AntV الرئيسية ، حيث ستجد الكثير من المكتبات الأخرى المتعلقة بتصور البيانات في الوقت الفعلي.

غالبًا ما يتم استخدامه لإنشاء أشياء مثل لوحات معلومات المسؤول ، وإنشاء مسارات البيانات ، وعمل أمثلة لتصور البيانات التفاعلية باستخدام محرك العرض الخاص بها. يمكن لهذا المحرك عرض المخططات وناقلات البيانات من خلال WebGL و Canvas و SVG. ولأن المكتبة قابلة للتوصيل ، يمكنك زيادة تحسين عروض الرسم البياني الخاصة بك من خلال مكتبات أكثر قوة مثل D3.js (التي رأيناها سابقًا).

# 8 - خشن

مكتبة roughViz من Jared Wilber هي مزيج من 3 مكتبات مختلفة: D3.js و Rough.js ومفيد - معالج رسم مرسوم يدويًا. كما يمكنك أن تقول من مثال لقطة الشاشة أعلاه ، هذه ليست مكتبة الرسوم البيانية النموذجية الخاصة بك. تم تصميم roughViz بالكامل بغرض مساعدتك في إنشاء مخططات مرسومة بخط اليد باستخدام JavaScript.

سيضيف هذا النوع من المكتبات إضافة رائعة إلى المشاريع الشخصية ، بمعنى آخر - المشاريع التي تتطلب شرارة إبداعية أكثر من نهج الأسلوب الاحترافي التقليدي. والصياغة نفسها بسيطة بقدر ما يمكن أن تكون ، تتماشى إلى حد كبير مع أمثال Frappe و ApexCharts.

يمكنك أن ترى ذلك بنفسك في العرض أدناه.

مثال roughViz

شاهد عرض Pen RoughViz Demo بواسطة Danny Englishby (DanEnglishby) على CodePen.

# 9 - مخططات خفيفة الوزن

إذا كنت تعمل في مشروع متعلق بالتمويل (أو عملة مشفرة لهذا الأمر) ، فمن الواضح تمامًا أن العديد من مكتبات المخططات المذكورة سابقًا لن تقطعها. على هذا النحو ، إليك مخططات Lightweight - مكتبة رسوم بيانية تم إنشاؤها خصيصًا لعرض المخططات والرسوم البيانية القائمة على التمويل.

ليست هذه المكتبة مفتوحة المصدر وخفيفة الوزن فحسب ، بل إنها تحزم أيضًا جميع الميزات الضرورية التي ستكون مطلوبة لعرض بيانات الرسم البياني حول الموارد المالية وهيكلها الديناميكي.

إحدى هذه الميزات هي دفق البيانات ، والتي تتيح لك تمرير البيانات في الوقت الفعلي إلى لوحتك ثم تحديثها دون حاجة المستخدم إلى تحديث الصفحة. وهناك عامل آخر قد تفكر فيه وهو الأداء ، والذي يجب ألا يمثل مشكلة كما هو موضح في الصفحة الرئيسية لهذه المكتبة ،

"تم تصميم حلول المخططات الخاصة بنا منذ البداية للعمل مع مصفوفات بيانات ضخمة. تظل الرسوم البيانية متجاوبة ورشيقة حتى مع وجود آلاف الأشرطة حتى مع التحديثات عدة مرات في الثانية باستخدام علامات التجزئة الجديدة ".

تحقق من العرض التوضيحي أدناه للتعرف عليه ، ولكن أيضًا العديد من خيارات وميزات الرسم البياني.

مثال على الرسوم البيانية خفيفة الوزن

انظر الرسم البياني المتقدم Pen tradingview بواسطة truong (@ truong160196) على CodePen.

موارد إضافية الرسوم البيانية خفيفة الوزن

• الرسوم البيانية المالية لتطبيقك

# 10 - لوحة

Billboard هي مكتبة مخططات واجهة تعتمد على D3. يحتوي على جميع الميزات الحديثة التي تتوقعها - عرض SVG ودعم اللمس للأجهزة المحمولة وواجهة بسيطة ووثائق رائعة لواجهة برمجة التطبيقات.

ومع ذلك ، فإن الميزة المفضلة لدي ، ويمكن القول للعديد من الآخرين أيضًا ، هي أن Billboard يوفر أكثر من 230 مثالًا للمخططات التي يمكنك إنشاؤها باستخدام هذه المكتبة. تنقسم هذه الأمثلة إلى فئات مخططات مثل أساسي ، ومحور ، وبيانات ، وشبكة ، وتفاعل ، ومنطقة ، وغيرها الكثير.

هذا يعني أنه لا يمكنك فقط العثور على نوع المخطط الصحيح لمشروعك ومتطلباته ، ولكن يمكنك أيضًا استكشاف خيارات أخرى ومعرفة ما إذا كان مثال معين يلفت انتباهك.

مثال Billboard.js

راجع طلبات الرسم البياني القلم - Billboard.js بواسطة DTCC (dtcc) على CodePen.

# 11 - المنظور

Perspective هو أحد المشاريع التي تديرها FINOS (Open-Source Fintech) ، و FINOS نفسها هي أيضًا جزء من Linux Foundation. يشبه إلى حد كبير المخططات خفيفة الوزن - يتم توجيه Perspective.js حول توفير حلول الرسوم البيانية للمشاريع القائمة على التمويل. ومع ذلك ، فهي قادرة على أكثر من ذلك بكثير وترى استخدامًا متكررًا في المشاريع المتعلقة بالتجارة الإلكترونية وشبكات البيانات وتجزئة الشحنات.

إذا سبق لك أن رأيت مخططات حول Covid-19 والمطارات والأحداث الرياضية الكبرى مثل الأولمبياد ، فهناك فرصة جيدة لتكامل الواجهة ودفق البيانات باستخدام Perspective. يحتوي على واجهة مستخدم غنية ومُحسّنة لتدفقات البيانات والتحليل المعقد في الوقت الفعلي.

إنه متاح لمطوري JavaScript و Python ويستخدم Custom Elements Web Component.

# 12 - مخطط Toast UI

إذا كان هناك أي شيء ، فإن مكتبة الرسوم البيانية Toast UI هي خيار آخر يجب مراعاته فيما يتعلق بأنماط المخططات وتصميمها. الوظيفة هنا تشبه إلى حد بعيد المكتبات التي نظرنا إليها بالفعل.

أعتقد أن المنطقة التي يختلف فيها Toast UI عن الخيارات الأخرى هي مواصفات واجهة برمجة التطبيقات. من المحتمل أن تكون واحدة من أفضل واجهات برمجة التطبيقات التي يمكنك الحصول عليها ، وهي تأتي مع وثائق مجانية متعمقة. إحدى ميزات واجهة برمجة التطبيقات هي المثيلات ، وهي طريقة يمكنك من خلالها تغيير بيانات المخطط ديناميكيًا إما بسبب تغيير مصدر البيانات أو بسبب إدخال المستخدم.

تتضمن أنواع المخططات التي يدعمها Toast الأشرطة والأعمدة والخطوط والمساحات والفقاعات والخرائط الشبكية والرادارات والأشرطة الشعاعية وغيرها. الطريقة المفضلة لاستخدام هذه المكتبة هي من خلال npm ، ولكن يتوفر CDN ، وكل ما عليك فعله هو تحديد div id="chart" حاوية للمكان الذي تريد عرض المخطط فيه.

# 13 - إعادة التخطيط

إذا كنت تعمل بشكل أساسي مع React.js ، فإن مكتبة Recharts مبنية فوق D3.js باستخدام React. إنه يحترم بنية مكونات React.js الأصلية ، ويمكن فصل المخططات التي تم إنشاؤها باستخدام Recharts وإعادة استخدامها كمكونات فردية على الصفحات التي تطلبها.

تحتوي جميع أمثلة المخططات على هيكل مكوناتها مكتوب مسبقًا في حال كنت ترغب في تجربتها في مشروع قائم. تم إصدار المكتبة لأول مرة في عام 2016 ولكنها لا تزال قيد التطوير النشط.

مثال إعادة المخططات

راجع Pen ReCharts بواسطة binu (binutomy) على CodePen.