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

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

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

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

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

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

D3.js

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

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

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

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

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

JSCharting

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

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

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

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

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

Highcharts

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

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

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

amCharts

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

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

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

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

خرائط جوجل

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

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

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

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

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

ZingChart

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

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

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

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

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

FushionCharts

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

يحتوي معرض المخططات على عدد كبير من الأمثلة وله مظهر مرئي نظيف.

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

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

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

KOOLCHART

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

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

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

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

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

Chart.js

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

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

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

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

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

خاتمة

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

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

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