رسالة الموقع

أفضل 10 مكتبات للخرائط البيانية بالجافا سكربت Best Free Javascript Charts

أفضل 10 مكتبات للخرائط البيانية بالجافا سكربت Best Free Javascript Charts

Free JS Charts Libraries ( Open Source )

لو كنت بتصمم لوحة تحكم للموقع , أو لو بتصمم موقع عن أخبار انتشار فيروس كورونا مثلا , أكيد هتحتاج تضيف خرائط_بيانية Charts لتوضيح اﻷرقام البيانية و اﻹحصائية بصورة رسومية قادرة عن نقل المعلومة بشكل سريع و مرئي. و في هذه المقالة سأعرض أفضل 10 مكتبات للرسوم البيانية مكتوبة بلغة الجافا سكربت سوف أعرض فقط المكتبات المجانية و مفتوحة المصدر و سأقوم للإشارة في نهاية المقالة عن بعض المكتبات المدفوعة.


1- Chart.js

أفضل 10 مكتبات للخرائط البيانية بالجافا سكربت Best Free Javascript Charts
مكتبة Chart.js تعتبر من أشهر مكتبات الخرائط البيانية و أكثرها انتشارا في لوحات التحكم و تطبيقات المواقع المختلفة. هي مكتبة مفتوحة المصدر Open Source و بالتالي هي مجانية تماما للاستخدام. مكتبة Chart.js تحتوي على 8 أنواع من الخرائط البيانية , سهلة الاستخدام , تتميز بأنها تقوم برسم الخرائط داخل HTML5 Canvas , واﻷهم أنها متجاوبة Responsive.


2- Chartist.js

أفضل 10 مكتبات للخرائط البيانية بالجافا سكربت Best Free Javascript Charts
مكتبة Chartist.js توفر خرائط بيانية جميلة التصميم و متجاوبة مع حجم الشاشة Responsive , وهي أيضا مجانية و مفتوحة المصدر مثل Chart.js. مكتبة Chartist.js تعتمد على الفيكتورز SVG ﻹنشاء الرسوم البيانية و تستطيع التحكم في خصائص الخرائط بسهولة عن طريق الـ CSS , SASS و الميديا كويريز. ومن مزايا مكتبة Chartist.js أنها توفر مجموعة من الـ Animations لرسم الخرائط و لكنها ستعمل فقط على المتصفحات الحديثة.

3- D3.js

أفضل 10 مكتبات للخرائط البيانية بالجافا سكربت Best Free Javascript Charts
مكتبة D3.js هي واحدة من أكبر المكتبات الخاصة ببناء الخرائط البيانية في الجافا سكربت , إنها تعتمد على الـ HTML, SVG & CSS ﻹنشاء خرائط تفاعلية مميزة , كما أن هذه المكتبة تركز على معايير الويب ﻹعطاءك تحكم تام بدون التقيّد بإطار عمل معين. مكتبة D3.js هي مجانية تماما للاستخدام و مفتوحة المصدر.

4- ApexCharts

مكتبة ApexCharts هي مكتبة متميزة جدا ﻹنشاء و إضافة الخرائط البيانية لموقعك. المكتبة توفر العديد من العديد من أنواع الخرائط البيانية , تفاعلية , متجاوبة تماما مع مختلف أحجام الشاشات Responsive , قابلة للتعديل و التحكم بسهولة , و طبعا المكتبة مجانية بالكامل و مفتوحة المصدر و متاح لها توثيق ضخم جدا يوضح كيفية التعامل معها و إضافتها إلى مشروعك الخاص.

5- ZingChart

مكتبة الخرائط ZingChart هي مكتبة مميزة جدا , ولولا أنها ليست مفتوحة المصدر لكانت على رأس هذه القائمة , المكتبة رغم ذلك مجانية و متاحة للاستخدام و لكن ستظهر حقوق الموقع كرابط على كل خريطة يتم إنشائها. مكتبة ZingChart توفر عدد ضخم من أنواع الخرائط التي تتعامل معها , ولها توثيق Documentation ضخم و إن كان مربك قليلا , تستطيع الاعتماد على أكثر من تصميم جاهز theme للمكتبة بما في ذلك نسخة مظلمة , كما تستطيع تعديل خيارات التصميم بسهولة.

6- PlusCharts

مكتبة PlusCharts هي مكتبة متميزة جدا ﻹضافة الخرائط البيانية لموقعك / تطبيقك. تتضمن العديد من أنواع الخرائط , سهلة الاستخدام , تعتمد على الـ SVG لرسم الخرائط , متجاوبة مع الجوال بشكل سلس و تام , وهي مبنية على مكتبة d3.js و طبعا مجانية و لها توثيق Documentation جيد جدا.

7- amCharts

مرة أخرى مكتبة تستحق أن تكون على رأس هذه القائمة لولا أنها ليست مفتوحة المصدر , إنها مكتبة amCharts التي توفر العديد و العديد من أنواع الخرائط التفاعلية , مع الـ Animations المتميزة التي تجعلها أشبه بفيديو رائع يتم عرضه. المكتبة مجانية تماما للاستخدام و لكن سيتم عرض اللوجو الخاص بها على كل خريطة يتم إنشاؤها في موقعك / تطبيقك الخاص.

8- Echarts

مكتبة الخرائط Echarts هي واحدة من أكبر مكتبات الخرائط البيانية في الجافا سكربت. تتضمن العديد و العديد من أنواع و أشكال الخرائط البيانية التي تستطيع رسمها و التعامل معها بما فيها الخرائط الجغرافية و الحرارية و غير ذلك. المكتبة مجانية تماما و لها توثيق Documentation ضخم جدا و مفيد للغاية سوف يساعدك في التعامل معها ﻹنشاء الخرائط البيانية في موقعك / تطبيقك.

9- Morris Charts

مكتبة Morris Charts هي أيضا من أكثر مكتبات الخرائط البيانية شهرة و استخدام في لوحات التحكم المجانية و المدفوعة. تتميز هذه المكتبة بالبساطة و هي تحتوي على 4 أنواع من الخرائط البيانية.

10- TOAST UI Chart

TOAST UI هي مكتبة مجانية و مفتوحة المصدر تتضمن بعض المكتبات الفرعية و التي تساعدك في إنشاء تطبيقات ويب متميزة , و من ضمن ما توفره مكتبة TOAST UI هو مكتبة الخرائط البيانية التي تمكنك من تحويل بيانات الموقع / التطبيق إلى خرائط بيانية جميلة.




ختاما , تجدر اﻹشارة إلى بعض المكتبات البسيطة و التي يمكن أن تؤدي الغرض بشكل أفضل خصوصا إذا كنت تريد مكتبة خفيفة الحجم لتطبيق بسيط , هذه المكتبات مثلn3-charts , C3.js , Ember Charts , jQuery Sparklines


أيضا تجدر اﻹشارة إلى بعض المكتبات غير المجانية ( المدفوعة ) و التي يمكن أن توفر لك مزيد من أشكال و أنواع الخرائط التي يحتاجها مشروعك الخاص و لا تتوفر في المكتبات المجانية ( وهذا احتمال بعيد جدا )
هذه المكتبات مثل Highcharts , CanvasJS , FusionCharts , AnyChart
المشاركات اﻷكثر تفاعلا