هذه هي أفضل مكتبات مخططات JavaScript لعام 2019

أولاً ، نبذة تاريخية:

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

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

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

أدخل العصر الحالي لتصور البيانات الذي يهيمن عليه JavaScript و SVG (Scalable Vector Graphics). تعمل المخططات الآن على جميع المتصفحات ، بدون مكونات إضافية خاصة ، وتدعم التفاعل والرسوم المتحركة وتبدو حادة حتى على الأجهزة عالية الدقة. من خلال مراجعة أكثر من 50 مكتبة تصور ، برزت هذه المنتجات التسعة:

D3.js

D3.js هي مكتبة جافا سكريبت رسومات شاملة وقوية للغاية. يسمح لك بربط البيانات التعسفية بنموذج كائن المستند (DOM) ، ثم تطبيق التحويلات المبنية على البيانات على المستند.

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

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

يمكن أن يكون D3.js كتلة إنشاء لمكتبة الرسوم البيانية. استخدم المطورون D3 لتسهيل استخدام حلول المخططات التي تستهلكها ، مثل NVD3.

D3.js مفتوح المصدر ومجاني للاستخدام.

رسم بياني

تدعم مكتبة مخططات JSCharting عددًا كبيرًا من أنواع المخططات بما في ذلك الخرائط و gantt و stock وغيرها التي تتطلب غالبًا مكتبات منفصلة لاستخدامها. يتضمن خرائط مدمجة لجميع دول العالم ، ومكتبة من رموز SVG. يمكن أن تظهر مجموعة من المخططات الصغيرة المستقلة في أي تسميات مخطط أو في أي عنصر div على الصفحة. يتم أيضًا تضمين عناصر تحكم واجهة المستخدم (UiItems) مما يسمح بمخططات تفاعلية أكثر ثراءً. من السهل التحكم في متغيرات البيانات أو التصور في الوقت الفعلي ويمكن تصدير المخططات إلى تنسيقات SVG و PNG و PDF و JPG.

ينقسم المعرض إلى نوع المخطط وعينات الميزة. تصميم المخطط مصقول وينتج عنه بعض الرسوم البيانية النظيفة. توفر المرئيات الشاملة تجربة رسم بياني نظيفة واحترافية.

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

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

JSCharting مجاني للاستخدام غير التجاري والشخصي ويقدم أيضًا خيارات الترخيص التجاري التي تشمل جميع أنواع المخططات والمنتجات مقابل رسوم واحدة.

هاي شارتس

Highcharts هي مكتبة رسوم بيانية شائعة لجافا سكريبت تستخدمها العديد من أكبر الشركات في العالم. يتم إنشاء المخططات باستخدام SVG والرجوع إلى VML من أجل التوافق مع الإصدارات السابقة وصولاً إلى IE6 / IE8. توضح الرسوم البيانية التجريبية مجموعة ميزات غنية إلى حد ما ولكنها لا تبهر بصريًا. تتضمن الوثائق العامة دروسًا تعليمية للعديد من الموضوعات ذات الصلة ، كما أن وثائق واجهة برمجة التطبيقات شاملة.

يستخدم الرسم البياني خيارات التكوين لإنشاء الرسوم البيانية وواجهة برمجة التطبيقات سهلة الاستخدام.

Highcharts مجاني للاستخدام الشخصي وغير التجاري. الترخيص التجاري مطلوب للاستخدامات الأخرى ويتم ترخيص مخططات الأسهم والخرائط والجانت بشكل منفصل.

amCharts

أصدرت amCharts مؤخرًا نسختها 4 التي تضيف محركًا قويًا للرسوم المتحركة SVG يسمح بإنشاء مشاهد تشبه الأفلام.

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

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

تقدم amCharts ترخيصًا مجانيًا مع الرسوم البيانية ذات العلامات التجارية والتراخيص المدفوعة للاستخدامات الأخرى.

مخططات جوجل

تعد مخططات Google قوية وسهلة الاستخدام.

تبدو المخططات النموذجية نظيفة وسهلة للعيون. يعرض المعرض والمعرض الموسع العديد من أنواع المخططات ، لكن الضغط على قائمة الهامبرغر يكشف عن أنواع أكثر (مثل التقويم) غير معروضة في قوائم المعرض هذه.

يحتوي كل نوع مخطط تعليمي مخصص مع أمثلة حية. تتضمن البرامج التعليمية رمزًا للميزات ذات الصلة وقوائم API. هذه تجربة ممتعة أن تبدأ مع مكتبة مخططات جديدة.

يتم تخصيص المخططات باستخدام كائن خيارات التكوين. تتم تعبئة مجموعات البيانات باستخدام فئة DataTable والتي يمكن أن تستهلكها جميع الرسوم البيانية. يحتوي كل نوع مخطط على خيارات فريدة مدرجة في البرامج التعليمية الخاصة بالنوع. تسمية الخاصية موحدة والعديد من الخيارات تعمل عبر جميع الأنواع.

مخططات Google مجانية ، ولكن هناك تحذير. إنها خدمة ويب ولا يمكن استضافتها محليًا. في الماضي ، ألغت Google استخدام واجهات برمجة التطبيقات ، لذا إذا كان استخدامك يمثل مهمة حرجة ، فقد ترغب في اختيار خيار آخر.

ZingChart

يقدم ZingChart العديد من أنواع المخططات ويتكامل مع أطر العمل الزاوي والتفاعل والأطر الأخرى. لديها مجموعة ميزات قوية مع العديد من خيارات التخصيص.

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

تتضمن الوثائق دروسًا لجميع الأنواع المتاحة وعددًا جيدًا من الميزات وقائمة واجهة برمجة التطبيقات الكاملة.

يستخدم ZingChart خيارات التكوين لتخصيص الرسوم البيانية. تتضمن العينات العديد من إعدادات الخصائص مثل نمط الخط. يمكن أن يعيق ذلك فهم الإعدادات المطلوبة لمخطط معين.

يمكن استخدام ZingChart مجانًا مع العلامات التجارية. الترخيص المدفوع متاح للاستخدام بدون علامة تجارية.

FusionCharts

كان FusionCharts موجودًا منذ سنوات عديدة بدءًا من البرنامج المساعد للرسم البياني المستند إلى Flash. إنها مكتبة قوية لتصور المخططات. يدعم العديد من تنسيقات البيانات بما في ذلك XML و JSON و JavaScript ، ويعمل في المتصفحات الحديثة وهو متوافق مع الإصدارات السابقة لـ IE6. يتم أيضًا دعم العديد من إطارات عمل JavaScript ولغات البرمجة من جانب الخادم.

يتضمن معرض الرسم البياني عددًا كبيرًا من الأمثلة ولها مظهر مرئي نظيف.

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

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

FusionCharts مجاني للاستخدام الشخصي مع علامة تجارية للمخطط. الترخيص المدفوع متاح للاستخدام التجاري وغير التجاري.

كولكارت

KoolChart هي مكتبة رسوم بيانية JavaScript تعتمد على قماش HTML 5. يتوفر منتج الخرائط والشبكة أيضًا.

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

تستخدم العينات XML المستند إلى سلسلة لتطبيق خيارات الرسم البياني التي تبدو أقل عملية من الأساليب الأخرى. تبدو هذه الخيارات مثل HTML5 ولكن يتم تعيينها من خلال سلسلة JavaScript.

تم توثيق واجهة برمجة التطبيقات جيدًا مع أمثلة الرسوم البيانية لكل خاصية. يتوفر أيضًا دليل PDF 173 صفحة.

فترة تجريبية لمدة شهرين متاحة للتقييم. الترخيص مطلوب بعد انتهاء الفترة التجريبية.

Chart.js

Chart.js هي مكتبة JavaScript مفتوحة المصدر تدعم 8 أنواع من المخططات. إنها مكتبة js صغيرة بحجم 60 كيلوبايت فقط. تتضمن الأنواع مخططات خطية ومخططات شريطية ومخططات مساحية ومخططات نسيجي ومخططات دائرية وفقاعية ومخططات مبعثرة ومخططات مختلطة. السلاسل الزمنية مدعومة أيضًا. يستخدم عنصر قماش للعرض ويستجيب لتغيير حجم النافذة للحفاظ على دقة المقياس. إنه متوافق مع الإصدارات السابقة لـ IE9. Polyfills متاحة للعمل مع IE7 أيضًا.

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

لا يتم عرض نموذج التعليمات البرمجية المصدر في معرض مواقع الويب ولكنه متاح في GitHub repo. تُستخدم خيارات التكوين لإنشاء الرسوم البيانية وتعديلها. واجهة برمجة تطبيقات الخيارات نظيفة وبديهية.

الوثائق شاملة وتتضمن برامج تعليمية مع واجهة برمجة تطبيقات الملكية ومقتطفات التعليمات البرمجية.

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

استنتاج

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

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

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