تطوير دائرة بيانية تفاعلية باستخدام مولدات WIJMO التفاعلية.
الهدف: تطوير دائرة بيانية متحركة .
متطلبات فهم الدرس : فهم طبيعة لغة الـ Html , JavaScript.
مستوى الدرس : 3
نظرة شاملة
مكتبة Wijmo تحتوي على تقنيات عديدة ومتطورة مواكبة لمتصفحات الويب , تحتوي حاليا المكتبة على اكثر من 40 ملف مفتوح مجاني قابل للتحميل و التجربة , الجدير بالذكر بأن المولدات المستخدمة مواكبة للغات البرمجية الجديدة HTML5 و JQuery , مع القدرة على ربط هذه الرسومات البيانية بقواعد البيانات بهدف اعطاء نظرة شاملة عن اداء النظام .
الملفات المستخدمة في تطوير الدائرة البيانية المتحركة
يحتوي المشروع على العديد من المولدات لتطوير الدائرة البيانية , جميع الملفات المستخدمة في المشروع بامكانكم تحميلها في نهاية الدرس , المشروع يتضمن على تقنيتين مستخدمة بشكل جوهري الا وهي ملفات تقنية الـ Js و ملفات التصميم الخاصة بمظهر الدائرة البيانية الـ CSS .
طريقة الاستخدام:
1- قم بتحميل الملف من هنا .
2- قم بفك الضغط من الملف. ( ستلاحظ تواجد فولدرين و صفحة ويب , بامكانكم الضغط على ملف Index ستلاحظ المشروع المراد التعديل عليه ).
3- قم بالنقر على الزر الايمن للفأره لصفحة الـ Index , اختيار Open With , من ثم اختيار Note Pad .
4- من لوحة الكيبورد الخاصة بك , قم بالضغط على مفتاحي Ctrl+F للبحث .
5- ضع الكلمة التالية في حقل البحث :text واضغط Finde Text .
ستلاحظ وجود البرمجية التالية :
header: {
text: "مبيعات اجهزة آبل لعام 2011"
},
text: "مبيعات اجهزة آبل لعام 2011"
},
6- قم بتغيير ( مبيعات اجهزة ابل لعام 2011 ) إلى عنوان الرسم البياني المراد تصميمه , فقط قم بتغيير المسمى.
7- بعد التعديل اسفل البرمجية سترى الكود البرمجي التالي والذي يتضمن الارقام الاحصائية التي سيتم استخدامها في رسم الدائرة البيانية التفاعلية.
seriesList: [{
label: "ماك بوك برو",
legendEntry: true,
data: 46.78,
offset: 0
}, {
label: "ماك بوك برو",
legendEntry: true,
data: 46.78,
offset: 0
}, {
قم بتغيير ( ماك بوك برو ) إلى ما يتناسب مع الرقم الاحصائي المراد تشكيله , قم بتغيير الرقم الاحصائي 46.78 إلى ما يتوافق معك في الرسم البياني الخاص بك.
8- قم باجراء التعديل على المسميات الاخرى بنفس الاسلوب السابق.
9- اذا اردت اضافة بند جديد للرسم قم باتباع التالي :-
* اضغط من لوحة المفاتيح على Ctrl+F .
* ضع البرمجية التالية ,[ في حقل البحث ومن ثم Enter من لوحة المفاتيح .
* قم باضافة اللغة البرمجية التالية قبل ,[ كما يلي.
{
label: "ماك ميني",
legendEntry: true,
data: 3.44,
offset: 0
}],
legendEntry: true,
data: 3.44,
offset: 0
}],
10- بعد الانتهاء من التعديل و تحديث البيانات , قم بالضغط من لوحة على زري Ctrl+S لحفظ التعديلات .
بعد اجراء التعليمات في الشرح , بامكانكم الذهاب إلى صفحة الـ Index بالنقر عليها ستلاحظ الشكل التالي , قم بتمرير زر الفأره على الرسم البياني ستلاحظ وجود النسبة المئوية المدخلة في كل بند قمت بالتغيير عليه في البرمجيات السابقة:-
نظرة اعمق
اليكم امثلة اكثر تعمقاً في تصميم لوحات تفاعلية ادائية باستخدام تقنية Wijmo .
- المبيعات
- الهواتف المتحرك ( اداء المبيعات عبر اجهزة الجيل الرابع )
اخيراً وليس آخراً ملفات المشروع الخاصة بشرح اليوم , قم بالضغط على زر التحميل ادناه لتحميل الملف المضغوط , لاثراء المزيد من الشروح و الدروس المتخصصة في المجال التقني و التصاميم التفاعلية الذكية تابعونا على تويتر و الفيس بوك .
