دليل بسيط: كيفية اختيار مكتبة المخططات للاستخدام؟

إذا كنت بحاجة إلى تطبيق مخطط على الويب ، فمن الطبيعي حقًا اتخاذ قرار باستخدام مكتبة خارجية. في معظم الحالات ، من المعتاد اختيار مكتبة تخطيط مفتوحة المصدر.

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

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

مجرد اتخاذ هذا المنصب كنقطة انطلاق للنظر الخاص بك. :)

اختيار نوع الرسم المناسب

بشكل أساسي لتنفيذ مخطط على الويب ، يتم استخدام نوعين من الرسومات.

  • صورة نقطية (قماش)
  • المتجه (SVG ، VML)

ما هي معايير الاختيار بين الصورة النقطية والرسومات المتجهة؟

حسنًا ، هناك مقال ممتاز حول هذا الموضوع من MSDN: "SVG vs canvas: كيفية الاختيار". ينصح به بشده.

التحديد الأساسي لاختيار نوع الرسم

صورة نقطية (قماش)

مثال على الرسم البياني الحقيقي

الايجابيات

  • مناسب لعرض البيانات الضخمة في الوقت الفعلي (على سبيل المثال ، لا تحتاج أدوات المشرف إلى احتياجات قوية فيما يتعلق بالتصميم وهي على ما يرام مع واجهة المستخدم الافتراضية / UX المتوفرة من المكتبة).

سلبيات

  • التخصيص على UI / UX صعب للغاية.
  • هناك قيود على العرض في أنواع مختلفة من مقياس العرض والتكبير ، نظرًا لطبيعة الصورة النقطية.

المتجه (SVG)

مثال على تخصيصات UI / UX مختلفة

الايجابيات

  • هناك مرونة كبيرة في تخصيص UI / UX (يتم تفسير كل شيء على أنه عقدة). عادة ما تكون كافية لخدمات المستخدم النهائي المستهدفة.
  • يمكن الحفاظ على نفس جودة القرار بين القرارات المختلفة ، والتكبير أيضا.

سلبيات

  • ربما لا يكفي عرض مجموعات البيانات الضخمة.

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

عندما تبحث في مكتبات المخططات ، ستحصل على مجموعة من مكتبات المخططات المختلفة. (يمكن الاطلاع على واحدة من القائمة على: https://bestof.js.org/tags/chart)

حسنًا ، كل مكتبات لها إيجابيات وسلبيات ومن الصعب جدًا تقييم 1: 1 ، لأنها جميعها لها خصائص فريدة.

ضع في اعتبارك: لقد حاولت التطبيع قدر الإمكان ، لكن لا يمكنني القول أنه دقيق حقًا (اسأل عن تفهم لطيف حول هذا).

القائمة

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

  • billboard.js (API / Demos)
  • ChartJS (API / عروض تجريبية)
  • مخططات عالية (API / عروض تجريبية)
  • C3.js (API / Demos)
  • nvd3 (API / عروض تجريبية)
  • رسام الخرائط (API / عروض تجريبية)
  • echarts (API / Demos)
  • plotly.js (API / Demos)
  • Britecharts (API / Demos)
  • TauCharts (API / Demos)

جدول المقارنة

انقر على الرابط لرؤية الجدول النصي: جدول المقارنة
(1) أقوم بتغيير المخططات الخاصة بي من nvd3 إلى billboard.js نظرًا لأن توثيق واجهة برمجة التطبيقات أكثر شمولًا.
(3) يتم قياس المؤشرات في 1 نوفمبر
مرجع:
- npmcharts: npm downlaods المقارنة
- قارن بين أفضل مكتبات مخططات جافا سكريبت لعام 2017

مقارنات واجهة

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

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

مخطط تدفق التحديد

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

الرسم البياني اختيار الرسم البياني التدفق

billboard.js؟

https://github.com/naver/billboard.js/

billboard.js عبارة عن مكتبة للمخططات والإصدار الأول كان June، 2017.

يمكن تعريفها على أنها:

مكتبة جافا سكريبت قابلة لإعادة الاستخدام وسهلة الاستخدام تعتمد على D3 v4 +

وإعطاء مرونة عالية في التخصيص.

مميزات

  • سوبر سهلة التنفيذ دون منحنى التعلم
  • واجهة بسيطة حقا
  • دعم على بيئة الهاتف المحمول (سهل الاستخدام)
  • مرونة عالية في التخصيص: يوفر 150+ خيارات وتصميمها بسهولة مع خصائص التصميم CSS.
  • مستندات API المنظمة و 80+ أمثلة
  • حجم خفيف الوزن (169 كيلو بايت مصغر)

الوضع الحالي

منذ الإصدار الأول قبل حوالي 5 أشهر ، تم تطويره بشكل ممتن بفضل الكثير من الانتباه إلى billboard.js.

npm التنزيلات

  • يونيو: 370 التنزيلات
  • يوليو: 479 التنزيلات (29.4 ٪ ، زيادة مقارنة الشهر السابق)
  • أغسطس: 862 التنزيلات (79.9٪ ، زيادة مقارنةً بالشهر السابق)
  • أيلول (سبتمبر): 1،124 عملية تنزيل (30.3٪ ، زيادة مقارنة بالشهر السابق)
  • أكتوبر: 1،706 التنزيلات (51.7٪ ، الزيادة مقارنة بالشهر السابق)
npm-stat.com: تم القياس من 2017–06–08 إلى 2017–10-31

جيثب ستارز

تعتبر نجوم GitHub واحدة من المؤشرات القوية والسهلة لتحديد شعبية المكتبة ونموها.

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

جيثب نجوم التاريخ

ماذا بعد؟

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

أيضًا ، نحن ننتظر بشدة مشاركة المجتمع وإسهاماته.

لا تتردد في المشاركة بمصدر مفتوح ، لأنه يهم دائمًا!