9 مكتبات جافا سكريبت لبناء المخططات التفاعلية

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

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

1. الرسم البياني JS

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

2. Chartist JS

Chartist JS هي مكتبة رائعة لإنشاء مخططات مستجيبة تستفيد من SVG. إلى جانب الاستجابة ، يمنحك Chartist المرونة باستخدام الفصل الواضح بين الاهتمامات: أسلوب مع CSS والتحكم مع JS. لجعل التخصيص أسهل ، يتم تضمين ملفات SASS. إن الشيء العظيم هنا هو أن لديك خيارات غير محدودة لتحريك المخطط الخاص بك باستخدام واجهة برمجة تطبيقات Chartist المتحركة ، SMIL ، والتي تمنحك خيارات إضافية للرسوم المتحركة.

3. C3 JS

C3 JS هي مكتبة لبناء الرسوم البيانية على أساس D3 JS. إنه يختتم الكود المطلوب لإنشاء المخططات باستخدام D3 JS ، بحيث يمكنك تخطي كتابة الكود D3 ، وإدخال البيانات الخاصة بك فقط. C3 يأتي مع مجموعة متنوعة من API التي يمكنك استخدامها للسيطرة على المخططات الخاصة بك بسهولة. لتخصيص الرسم البياني الخاص بك ، حدد الأنماط المخصصة الخاصة بك لفئات CSS المقدمة. بناء المخططات من المخططات خط بسيط لقياس المخططات. تحقق من هذه الصفحة لمعرفة كيف تعمل المكتبة.

4. فلوت

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

5. EChart

Echart هي مكتبة شاملة بشكل مثير للدهشة من الصين تدعم أنواعًا متعددة من المخططات ، ويمكنها معالجة البيانات الضخمة (تخطيط ما يصل إلى 200000 نقطة بيانات على المخطط الديكارتي) ، ولديها خدمة تجوال على نطاق واسع ، والقدرة على استخراج البيانات ودمجها وتبادلها بسهولة بين المخططات المتعددة ، مما يسمح واحد للتبديل بسهولة من نوع بيانات واحد إلى آخر ، والكثير الكثير.

6. Peity

Peity سيضيف مخططًا صغيرًا إلى صفحة الويب الخاصة بك. وهو البرنامج المساعد jQuery الصغيرة التي تحول عنصر إلى ميني SVG خط ، شريط ، دونات ، أو مخطط دائري. تحتاج فقط إلى إنشاء عنصر وإعطاء قيمة مثل 1/5 وإجراء مكالمة peity ( 'فطيرة') على هذا العنصر لعمل مخطط دائري صغير. على سبيل المثال ، لإنشاء مخطط دونات يتم تمييزه بخمسة فقط ، إليك HTML:

1/5

يمكنك تخصيص لون الرسم البياني ، ونصف القطر ، والعرض والارتفاع ، ولكن افتراضيًا يتم عرضها بحجم صغير.

7. DC JS

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

8. Google Chart

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

مع هذا المعرف لعرض المخطط الخاص بك.

9. NVD3

NVD3 هي مجموعة من المخططات البيانية القابلة لإعادة الاستخدام ومكونات المخطط التي تم إنشاؤها باستخدام D3 JS. هذه المكتبة هي بالتالي "قالب" سيساعد في تسهيل إنشاء المخططات. تحقق من العديد من الرسوم البيانية عينة بنيت مع NVD3 هنا.

اقرأ الآن: مكتبات JavaScript لإنشاء خرائط تفاعلية ومخصصة