تصور البيانات لمشروع الويب الخاص بك

نشرها ألكسندر كاشفيروف ، كبير مطوري جافا سكريبت

مرحبًا بك واستمتع بالقراءة!

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

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

لفهم أفضل - تحتاج إلى معرفة JavaScript وفهم أساسي لعمل الويب.

بالطبع ، مرئيات البيانات لها تاريخها الخاص (لن نتطرق إلى هذا في المقالة) ، إذا كانت مثيرة للاهتمام ، يمكنك العثور عليها ، على سبيل المثال ، هنا .

مقالتي ربما ليست شاملة ، لذا اكتب التعليقات والرسائل الخاصة ، وأنا على استعداد للاستماع إلى النقد وتكملة المواد.

لذا دعنا نذهب!

لنفترض أن لديك موقعًا ...

... الذي تريد تلوينه مع تصور البيانات.

يمكن أن تكون هذه رسومًا بيانية بسيطة أو غير تافهة تمامًا. ثابت أو تفاعلي. عدد قليل من العناصر المرسومة أو عدة عشرات الآلاف. أي حل مناسب لحالة معينة هو المشكلة التي يجب حلها.

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

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



كيف ستحل المشكلة دون معرفة مجال الموضوع؟ على الأرجح اختر أحد الخيارات:

• خذ "مساعدة صديق" ؛
• جوجل ، قم بدراسة المشكلة بنفسك واختر الأداة المناسبة.

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

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

التنوع التكنولوجي
من الناحية الفنية ، يمكننا تنفيذ عرض البيانات على صفحة بطرق مختلفة:

• HTML - لماذا لا؟ يمكننا رسم أبسط مخطط شريطي باستخدام علامات HTML و CSS.
• SVG عبارة عن رسومات متجهة ، فهي تضمن صورة واضحة بغض النظر عن الحجم. بناء الجملة يشبه XML. صحيح ، إذا كانت هناك حاجة لعشرات الآلاف من النقاط للتصور المعقد ، فقد يؤثر ذلك بشكل كبير على الأداء.
• قماش - هنا يمكننا رسم أي شيء تقريبًا. للقيام بذلك ، نحتاج إلى إنشاء عنصر على الصفحة والوصول إليه من خلال واجهة برمجة التطبيقات. ارسم شيئًا وأضف لونًا وخلفية ونصًا وما إلى ذلك. عادةً ما تعرض لوحة الرسم كميات كبيرة من البيانات.
• WebGL - يسمح لك برسم رسومات ثلاثية الأبعاد.
• VML هي تقنية قديمة من Microsoft ، تشبه XML. مناسب لأولئك الذين يحتاجون إلى ضمان التشغيل العادي للموقع في Internet Explorer الأقدم من الإصدار العاشر.

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

التنوع الوظيفي

يمكن للمخططات:

• يكون من أنواع مختلفة:
  خطي ، عمودي ، يشبه الشجرة ، إلخ.
  
  
  صور مأخوذة من هنا .
• تكون متكيفة:
  الرد على تغيير حجم الصفحة.
  
  تم التقاط الصورة من هنا .
• أن تكون متحركة:
  على سبيل المثال ، اسمح بمظهر العناصر وإزالتها.
  
  
  تم أخذ مثال هنا .
• تكون مفتوحة أو مغلقة للتخصيص:
  دعنا نقول أن مكتبة D3 المعروفة يمكن ضبطها بدقة لتناسب احتياجاتك ، على عكس العديد من المكتبات الأخرى.
• كن مستقرا أم لا:
  على سبيل المثال ، عند تحميل البيانات ، يمكن أن تؤدي قيمة بعض المعلمات التي تساوي null / undefined إلى عدم عرض كامل للرسم البياني.
  
  
  
• تكون عبر متصفح أم لا:
  سوف يعمل الجدول الزمني في أوبرا المحمول؟
  
  
• دعم تصدير (حفظ) الرسومات إلى الصورة.
  
  
• دعم التكامل مع الأطر:
  من الصعب الآن تخيل تطبيق كبير في JS خالٍ بدون Angular / React / like.
  
  
• دعم حفظ / تحميل الدولة:
  على سبيل المثال ، لحفظ الحالة عند إخفاء أي سلسلة من النقاط على المخطط الخطي.

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

دعونا نلقي نظرة على المواصفات غير التقنية

ها هم:

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

الآن دعنا ننتقل إلى الممارسة والنظر في المنتجات الحقيقية الموجودة في السوق.

حلول شائعة في 2018

حلول مدفوعة

هذه ليست قائمة كاملة ، لكن من الجدير إدراج عدد من المكتبات الشعبية:

• مخططات Fusioncharts بواسطة FusionCharts ، الهند ، 2002.
  
• Anychart من قبل فريق AnyChart ، الولايات المتحدة ، 2003.
  
• Amcharts بواسطة فريق amCharts ، ليتوانيا ، 2004.
  
• Highcharts من قبل فريق Highsoft ، النرويج ، 2009.
  
• Zingchart من قبل فريق ZingChart ، الولايات المتحدة الأمريكية ، 2009.
  

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

حلول مجانية

• مخططات Google من Google ، الولايات المتحدة الأمريكية ، 2007.
  
  
  
  • الوصف
    يقدم المنتج مجموعة كبيرة: من المخططات الخطية البسيطة إلى المخططات المعقدة والمتعددة المستويات. هناك العديد من الأمثلة الجاهزة. من السهل تطبيق الميزات ، على سبيل المثال ، يمكن تضمين الرسومات أو تصديرها كصور. تتوافق المكتبة مع المتصفحات والمنصات المختلفة ، وتعمل على نظامي iOS و Android ، وتدعم الإصدارات القديمة من IE ولا تتطلب تثبيت المكونات الإضافية. يستخدم HTML ، SVG ، VML للعرض المرئي. هناك نقص - وفقًا للترخيص ، لا يمكنك استخدام ملفات المكتبة محليًا.
    
  • الترخيص
    المنتج مجاني ، ولكن ليس مفتوح المصدر. يجب تنزيل رمز مصدر المكتبة من خوادم Google.
    
  • مثال بسيط على الرسم البياني
  • أمثلة
  
  
• D3.js من قبل مايك بوستوك ، الولايات المتحدة الأمريكية ، 2011.
  
  
  • الوصف
    تدعي المكتبة أنها تجسيد لنهج قائم على البيانات. على عكس العديد من الآخرين ، يسمح لك بعرض البيانات بالطريقة التي تريدها بالضبط. ويرجع ذلك إلى واجهة برمجة التطبيقات المرنة التي تحتاج إلى التعود عليها. تتيح لك وظيفة المكتبة تخصيص أي مخطط وتوفر ميزات أكثر من مخططات Google (يقدم الأخير خيارات المخطط الأكثر شيوعًا). للعرض ، يمكنك استخدام أي خيار: html ، svg ، canvas ، webgl ، ...
    
  • الترخيص
    BSD-3
    
  • مثال بسيط على الرسم البياني
  • أمثلة
  
  
• الرسوم البيانية بواسطة بايدو الصينية ، الصين ، 2013.
  
  
  
  
  • الوصف
    مكتبة مجانية لتصور البيانات من أصدقائنا من الصين. إنه حقًا يستحق الاهتمام ، فهو يوفر مجموعة من الرسوم البيانية القياسية الجاهزة ، والقابلة للتخصيص إلى حد ما ومجموعاتها. ألاحظ واجهة مستخدم لطيفة وتفاعل خارج الصندوق. تعمل المكتبة بشكل جيد مع كميات كبيرة من البيانات وتتضمن العديد من الأمثلة ، بما في ذلك الرسوم البيانية ثلاثية الأبعاد. مكتوب بلغة JS نقية ، يستخدم مكتبة zrender كمحرك تجسيد قماش . من السلبيات - ليس كل الوصف باللغة الإنجليزية والمجتمع الناطق باللغة الإنجليزية صغير.
    
  • الترخيص
    BSD
    
  • مثال بسيط على الرسم البياني
  • أمثلة
  
  
• Chart.js حسب المساهمين مفتوح المصدر ، على مستوى العالم ، 2013.
  
  
  
  
  • الوصف
    تقترح المكتبة استخدام مجموعة أساسية من الرسوم البيانية من عدة أنواع (8 في وقت كتابة هذا التقرير). يستخدم Canvas لتقديم الرسومات. مكتبة انبوب لطيفة جدا لبداية سريعة. ألاحظ واجهة المستخدم والتصميم الجميل ، وكذلك سهولة التطوير.
    
  • الترخيص
    معهد ماساتشوستس للتكنولوجيا
  • مثال بسيط على الرسم البياني
  • أمثلة
  
  
• رسام خرائط من مطور فردي جيون كونز ، سويسرا ، 2014.
  
  
  
  
  • الوصف
    يقدم مخططات متجاوبة جميلة وقليلاً من التخصيص وبداية سريعة. من السلبيات - ثلاثة أنواع فقط من الرسوم البيانية (في وقت كتابة هذا التقرير) ، بالإضافة إلى بعض مجموعاتها. يستخدم SVG لتقديم الرسومات. مكتبة مصباح دافئة أخرى بجمالها ، ولكن نطاقها ضيق للغاية.
    
  • الترخيص
    معهد ماساتشوستس للتكنولوجيا
  • مثال بسيط على الرسم البياني
  • أمثلة
  
  
• Plotly بواسطة فريق Plotly ، كندا ، 2015.
  
  
  
  
  • الوصف
    تعتمد هذه المكتبة على D3.js و stack.gl . ويلاحظ نهج إعلاني رفيع المستوى. يقدم 20 نوعًا من الرسوم البيانية (في وقت الكتابة) ، بما في ذلك ثلاثي الأبعاد. تسمح لك D3js ، التي تكمن وراءها ، بتخصيص الرسومات بشكل جيد. يستخدم SVG و WebGL لتقديم الرسومات. يمكن أن يكون الجمع بين كمية وجودة الرسوم البيانية مع ترخيص MIT جذابًا لمطوري المنتجات الكبيرة.
    
  • الترخيص
    معهد ماساتشوستس للتكنولوجيا
  • مثال بسيط على الرسم البياني
  
  

آمل أن تساعد هذه التفاصيل في تحديد الحل المناسب لمهمتك. أخيرًا ، بعض الأمثلة المرئية المثيرة للإلهام.

أمثلة

1. تصور حركة المرور من أوبر . تصور Uber كمية كبيرة من بيانات حركة المرور باستخدام JavaScript و WebGL. يتم تطوير مكتبة هذا من قبل Uber أنفسهم ، ومع ترخيص MIT.
   
   
2. رسم تخطيطي تفاعلي: "روتين يومي للمبدعين المشهورين" . يتم تنفيذه بواسطة تنسيق HTML + CSS بسيط.
   
   
3. دروس من الأمريكي العادي خلال النهار . تم الحصول على البيانات على أساس المسح ، وتم عمل التصور على D3 ، يتم استخدام SVG.
   
   

شكرا لكم جميعا!