أفضل مكتبات إنشاء الرسوم البيانية Best Chart Library

Ali Majrashiمنذ 8 سنوات

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

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

D3.js — Data-Driven Document

1.png

من أقدم وأقوى المكتبات لإنشاء الرسوم البيانية وذات مصدر مفتوح مجانية الإستخدام وتحتوي على مميزات كثيرة كانت مفقودة بكثير من المكتبات الأخرى بوقتها من أهم مميزاتها خاصية "Enter and Exit" والتي تسمح لك بإضافة مجموعة جديدة من البيانات للرسم البياني الذي تم إنشائه مسبقا وحذف البيانات القديمة بشكل تفاعلي وحيوي وتميزت بطريقة كتابة الأكواد البسيطة وقوة عرض البيانات بتأثيرات حركية مرنة وتقوم مكتبة D3.js بإنشاء الرسوم البيانية بإستخدام HTML, SVG, CSS

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

ايضا لاتعمل جيدا مع متصفحات قديمة مثل IE8 لكن من الممكن استخدام إضافات مثل  aight plugin لتمكين المكتبة من دعم أغلب المتصفحات 

الترخيص: مصدر مفتوح - مجانية الإستخدام

Google Charts

2.png

تقدم مكتبة Google Charts العديد من الرسوم البيانية الجاهزة للإستخدام وبكل سهولة مثل area charts و bar charts و calendar charts و  pie Charts و geo charts والكثير 

تميزت المكتبة بكثرة الخيارات التي تسمح لك بسهولة التعامل مع الرسوم البيانية وتغييرها لما ترغب بكل مرونة ويتم عمل هذه الرسوم البيانية بواسطة HTML5 و SVG وتدعم جميع انواع المتصفحات والأجهزة وتدعم المتصفحات القديمة مثل النسخ القديمة من متصفحات IE عن طريق VML لإنشاء الرسوم البيانية 

يمكنك مشاهدة جميع الرسوم البيانية التي تسطيع هذه المكتبة إنشائها وعرض الخيارات للتحكم بها من هنا صفحة الرسوم البيانية المبنية بواسطة Google Charts

الترخيص: مجاني - ولكن ليس مفتوح المصدر فترخيص Google لايسمح لك بأن تقوم بتحميل ملف JS بموقعك فإن كان مشروعك ذو بيانات حساسة وخاصة فهذه المكتبة غير مناسبة لك لأن جميع البيانات يجب ان تمر بسيرفرات Google ليتم تحليلها ثم عرضها كرسوم بيانية بالمتصفح 

ChartJS

3.png

من أجمل المكتبات وأخفهم حجما تميزت بتصميمها ذو الطابع Flat Design ومرونتها حيث تم برمجة المكتبة على شكل وحدات تدعم مكتبة ChartJS جميع انواع المتصفحات والشاشات وتحتوي على ٦ انواع من الرسوم البيانية (core, bar, doughnut, radar, line, and polar area) يتم تشكيل هذه الرسوم على المتصفح بإستخدام HTML5 Canvas بالمتصفحات الحديثة وعن طريق Polyfill للمتصفحات القديمة مثل IE7/8 تعتبر من أقوى المكتبات وتمكنك من إستخدام اي نوع من الرسوم البيانية التي تدعمها المكتبة على حدة مما يسمح لك بتصغير حجم ملف المكتبة أكثر مما هو عليه على حسب إحتياجات مشروعك

الترخيص: مفتوح المصدر - مجانية الإستخدام

Chartist.js

4.png

من المكتبات التي تميزت بسهولة الإستخدام ودعمها لجميع انواع الشاشات وتميزت عن غيرها بالمؤثرات الحركية مما يعطي بياناتك الطابع الحي والتفاعل مع المستخدم ولكن هذه الخاصية تعمل فقط بالمتصفحات الحديثة و تميزت بمرونة تعديل شكل الرسوم البيانية بواسطة CSS ودعم الشاشات عن طريق Media Query تستخدم المكتبة SVG لرسم البيانات بالمتصفح مما يجعلها مهيئة للتطويرات المستقبلية

معلومة: تم بناء هذه المكتبة لتلافي حدود المكتبات الآخرى بوقتها وبسبب غلاء إستخدام المكتبات المدفوعة لذلك تم تزويد المكتبة بمميزات وخواص كانت مفقودة من المكتبات الأخرى 

الترخيص: مفتوح المصدر - مجانية الإستخدام

Ember Charts

5.png

مكتبة مفتوحة المصدر تم بنائها على D3.js و Ember.js تقدم انواع متعددة من الرسوم البيانية مثل time series و bar و pie و scatter وتسمح لك بإنشاء ماتريد من رسوم بيانية خاصة بك وتميزت بطريقة تعاملها مع الأخطاء عند تزويدها ببيانات خاطئة مما يضمن عدم توقف عمل برمجياتك عند حدوث أي خطأ 

هذه المكتبة من ضمن سلسلة جميلة لتحسين وتسهيل التعامل مع Ember.js ويوجد مكتبات أخرى من نفس المطور مثل Ember Tables و Ember Widgets

الترخيص: مفتوح المصدر - مجانية الإستخدام

n3-charts

6.png

إذا كنت مطور AngularJS وترغب بإنشاء رسوم بيانية خطية Line Charts فإن n3-charts ستكون ضمن إهتماماتك حيث تم تطويرها على AngularJS و D3.js عيبها عدم دعمها لأنواع أخرى من الرسوم البيانية يمكنك مشاهدة صفحة الأمثلة لرسوم بيانية مبنية على n3-charts

الترخيص: مفتوح المصدر - مجانية الإستخدام

Smoothie Charts

7.png

إذا كنت تتعامل مع بيانات حية RealTime Data يتم تحديثها بإستمرار يمكن ان تفيدك هذه المكتبة هي تستخدم HTML5 Canvas لتشكيل الرسوم البيانية بالمتصفح تم برمجتها بدون مكتبات آخرى مثل Jquery او AngularJS وتقدم خيارات عديدة مثل تاخيرعرض البيانات او تغير الآلوان للبيانات الحية التي يتم رسمها بالمتصفح مثلا لو ترغب بعرض رسم بياني يوضح لك إستخدام CPU بالسيرفر بشكل حي وتفاعلي بمجرد تزويد بيانات حية للمكتبة

الترخيص: مفتوح المصدر - مجانية الإستخدام

Chartkick

8.png

هذه المكتبة مخصصة لمطوري برمجيات Ruby وتدعم أغلب انواع الرسوم البيانية مثل pie, column, bar, area, geo, timeline, and multiple series تسمح لك بإنشاء أي من هذه الرسوم البيانية بسطر برمجي واحد وتقوم بتشكيل الرسوم بواسطة SVG أيضا تتوفر منها نسخة لمطوري Python و JavaScript

الترخيص: مفتوح المصدر - مجانية الإستخدام 

ZingChart

9.png

مكتبة لمعالجة البيانات الضخمة و إنشاء رسوم بيانية جميلة لها تميزت بخفتها وسرعتها ومرونتها يتم إستخدام هذه المكتبة من قبل شركات كبيرة مثل Apple و Microsoft و Adobe و Boeing و Walmart حيث تستخدم تقنيات حديثة مثل Ajax و JSON و HTML5 لإنشاء رسوم بيانية جميلة وبسرعة كبيرة 

يمكنك تجربة المكتبة مجانا ولكن يلزمك شراء ترخيص إذا كنت ترغب بإستمرار إستخدام هذه المكتبة

الترخيص: مدفوع تجاري - غير مجانية يجب شراء ترخيص

Highcharts JS

10.png

تعتبر أحد أشهر المكتبات وتدعم العديد من انواع الرسوم البيانية وتحتوي على العديد من المؤثرات الحركية مما يمكنك من إنشاء رسوم بيانية جميلة وجذابة للمستخدم مثل بعض المكتبات وتاتي Highcharts JS وبحوزتها العديد من الرسوم البيانية الجاهزة للإستخدام مثل spline و area و areaspline و column و  bar و  pie و scatter والعديد

تميزت هذه المكتبة عن غيرها بدعم جميع انواع المتصفحات حتى القديمة مثل IE6 بدون أي إضافات وأيضا تقدم خدمة Highchart cloud لبناء الرسوم البيانية السحابية تستطيع إستخدام المكتبة شخصيا ولكن إذا كنت تقدم منتج تجاري يجب أن تقوم بشراء ترخيص للإستخدام

الترخيص: مجانية للإستخدام الشخصي - مدفوعة للإستخدام التجاري

Flot

11.png

من أقدم المكتبات وأشهرهم تم تطويرها بواسطة Jquery وتم التركيز على سهولة الإستخدام والمؤثرات الحركية مما تميزت به المكتبة المرونة وسهولة التحكم بالمؤثرات الحركية بواسطة Jquery ودعمها لجميع انواع المتصفحات حتى القديمة جدا مثل IE6 و Firefox 2 وتدعم المكتبة العديد من انواع الرسوم البيانية مثل lines و points و filled areas و bars والعديد أيضا يوجد بالموقع مكتبة تحتوي على مشاركات العديد من المطورين على شكل إضافات يمكنك مشاهدة صفحة الإضافات المطورة على Flot من هنا او مشاهدة صفحة أمثلة الرسوم البيانية المبنية على Flot من هنا

الترخيص: مفتوحة المصدر - مجانية الإستخدام

amCharts

12.png

من أجمل المكتبات الموجودة حيث تم تقسيم المكتبة لثلاث مكتبات متخصصة وهم JavaScript Charts و Maps Charts و Stock Charts 

1- JavaScript Charts متخصصه بإنتاج العديد من الرسوم البيانية وتقوم بإنشاء هذه الرسوم بواسطة SVG وتعمل على المتصفحات الحديثة فقط أمثلة للرسوم البيانية التي تسطيع هذه المكتبة إنشائها 

اقتباس

Column, Bar, Line, Area, Step, Step without risers, Smoothed line, Candlestick, OHLC, Pie/Donut, Radar/ Polar, XY/Scatter/Bubble, Bullet, Funnel/Pyramid charts as well as Gauges.

2- Maps Charts او كما تسمى amCharts متخصصه بعرض رسوم بيانية على شكل خرائط ووضع أيقونات أو صور ببعض الأماكن ورسم خطوط بين بعض الأماكن أو دعم خاصية التقريب و التبعيد بالخريطة أو دعم وضع النصوص على الخرائط التي تم إنشائها 

3- Stock Charts مخصصة لإنشاء رسوم بيانية خاصة بالأسهم ومتخصصة بالرسم البياني المالي 

يوجد نسختين مجانية الإستخدام ولكن ستضع رابط بالرسم البياني لموقع المكتبة ونسخة مدفوعة ولكن عيبها غلاء قيمة النسخة المدفوعة

الترخيص: مجانية بوضع رابط بالرسم البياني - مدفوعة لحذف الرابط والحصول على الدعم الفني

Fusioncharts

13.png

من أقدم المكتبات حيث تم إصدار اول نسخة بعام 2002 يتم إنشاء الرسوم البيانية باستخدام HTML5 و SVG للمتصفحات الحديثة و VML للمتصفحات القديمة تميزت هذه المكتبة عن غيرها بدعمها انواع البيانات من نوع JSON أو XML وإمكانية تصدير الرسوم البيانية على هيذة PNG أو JPG أو PDF تحتوي هذه المكتبة على أكثر من 90 نوع من الرسوم البيانية الجاهزة للإستخدام 

من مميزاتها دعمها لأنواع كثيرة من لغات البرمجة او المكتبات البرمجية عن طريق مكتباتهم المتخصصة مثل إمكانية إنشاء الرسوم البيانية بواسطة PHP أو Jquery أو AngularJS أو Rails يمكنك مشاهدة صفحة المكتبات البرمجية من هنا

تحتوي مكتبة Fusioncharts على كل ماتتمناه من مميزات وخصائص لإنشاء الرسوم البيانية بشكل جميل وجذاب وتدعم لغات متعددة لها إمكانيات تميزها عن غيرها بسهولة الإستخدام و التعامل 

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

الترخيص: مجانية للإستخدام الشخصي - مدفوعة للإستخدام التجاري

EJS Chart

14.png

على حسب موقع المكتبة أنها قادرة على إنتاج رسوم بيانية للشركات سواء كانت بيانات بسيطة أو كبيرة بكل قوة ومرونة وتقوم بإنشاء رسوم بيانية سهلة القراءة والتعامل ليس كبقية المكتبات الأخرى تدعم جميع انواع المتصفحات حتى القديمة منها مثل IE6 يمكنك مشاهدة صفحة أمثلة مبنية على EJS Chart من هنا

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

الترخيص: مجاني إنشاء رسم بياني واحد بالصفحة - مدفوع للإستخدام غير المحدود

uvCharts

15.png

مكتبة مفتوحة المصدر تم بنائها على D3.js وتحتوي على 12 نوع من الرسوم البيانية الجاهزة للإستخدام ولديها أكثر من 100 خيار للتحكم بإعدادات المكتبة من مميزات المكتبة إزالة الصعوبة عن التعامل مع مكتبة D3.js وتبسيط التعامل معها عن طريق API سهل ومرن للتحكم بشكل الرسوم البيانية وايضا تقديم انواع جاهزة للإستخدام مباشرة بدون إنشاء الرسوم البيانية من برمجيا من الصفر مثل D3.js تقوم المكتبة بإنشاء الرسوم البيانية بواسطة SVG و HTML و CSS

الخلاصة

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

كلمات دليلية:
0
إعجاب
7287
مشاهدات
0
مشاركة
0
متابع
متميز
محتوى رهيب

التعليقات (0)

لايوجد لديك حساب في عالم البرمجة؟

تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !