لوحة القيادة مع الجداول المحورية متعددة. كيف إلى البرنامج التعليمي

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

قد تتساءل ما هي أفضل طريقة لتوفير الوقت لتحقيق هذا النوع من الأهداف.

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

الحمد لله على مكالمات Flexmonster API ، من السهل جدًا القيام به.

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

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

لنبدأ!

حول الأساليب والأحداث

سنحتاج إلى استخدام مكالمات API التالية:

  • setReport () - تسمح هذه الطريقة بتغيير التقرير بشكل حيوي ، أي في وقت التشغيل. أيضًا ، يمكنك تحميل التقارير المحفوظة مسبقًا في الجدول المحوري.
  • reportcomplete - يتم تشغيل هذا الحدث عندما يتم تحميل البيانات من تقرير ، ملف الترجمة إلى الجدول المحوري وتم تقديم الشبكة / المخطط. بمعنى آخر ، يشير إلى أنه يمكنك البدء في العمل مع مكون الجدول المحوري.
  • reportchange - يتم تشغيل هذا الحدث بمجرد حدوث بعض التغييرات في تقرير (مثل التصفية والفرز والتنسيق وإضافة المقاييس المحسوبة وتشغيل الاستعلامات وما إلى ذلك).

الخطوة 1: الإعداد باستخدام البرامج النصية Flexmonster

أضف البرامج النصية اللازمة إلى صفحة الويب الخاصة بك:

لا تنس إضافة الحاويات التي سيتم عرض كلا الجدولين فيها:

الخطوة 2: تهيئة جدول محوري مضغوط

أضف شفرة جافا سكريبت JavaScript هذه لإنشاء المكون الأول:

كما ترى ، قمنا بتعيين مسار لمصدر البيانات وحددنا شريحة - جزء من التقرير يصف التسلسلات الهرمية التي يجب عرضها على الشبكة.

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

الخطوة 3: إنشاء شبكة مسطحة

يشبه الكود بأكمله لجدول مسطح الكود أعلاه ، ولكن لتشغيل المنظر المسطح للجدول المحوري ، يلزمك تحديده في خياراته:

الخطوة 4: جعل المحاور تتفاعل

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

على حد سواء ، أضف معالج أحداث إلى حدث reportchange لمثيل الجدول المضغوط لتتمكن من الاستماع إلى تغييرات التقرير.

هنا يتم تنفيذ نفس المنطق:

  • الحصول على تقرير من الجدول المضغوط
  • وضع شريحة إلى تقرير الجدول مسطح.

الخطوة الأخيرة: استمتع وشارك النتائج

اطلع على لوحة معلومات Pen Flexmonster Pivot Table & Charts بواسطة Flexmonster (flexmonster) على CodePen.

ملخص

لقد تعلمت اليوم من الناحية العملية كيفية إنشاء لوحة معلومات JavaScript عن طريق ربط حالتين من الجداول المحورية جنبًا إلى جنب مع مكالمات Flexmonster API.

مع Flexmonster ، تتمتع عملية إعداد التقارير بجميع الفرص لتصبح ثاقبة وفعالة. لا تتردد في استخدامه لتتبع مقاييس مؤسستك!

روابط مفيدة

  • عرض حي
  • Flexmonster المحورية الجدول والرسوم البيانية
  • المزيد من عروض Flexmonster

نشرت أصلا على https://codepen.io.