Create Animated Pie Chart with Wijmo شرح تطوير دائرة بيانية متحركة باستخدام تقنية ويجمو

تطوير دائرة بيانية تفاعلية باستخدام مولدات 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”

                },
6- قم بتغيير ( مبيعات اجهزة ابل لعام 2011 ) إلى عنوان الرسم البياني المراد تصميمه , فقط قم بتغيير المسمى.
7- بعد التعديل اسفل البرمجية سترى الكود البرمجي التالي والذي يتضمن الارقام الاحصائية التي سيتم استخدامها في رسم الدائرة البيانية التفاعلية.
seriesList: [{
                    label: “ماك بوك برو”,
                    legendEntry: true,
                    data: 46.78,
                    offset: 0
                }, {
قم بتغيير ( ماك بوك برو ) إلى ما يتناسب مع الرقم الاحصائي المراد تشكيله , قم بتغيير الرقم الاحصائي 46.78 إلى ما يتوافق معك في الرسم البياني الخاص بك.
8- قم باجراء التعديل على المسميات الاخرى بنفس الاسلوب السابق.
9- اذا اردت اضافة بند جديد للرسم قم باتباع التالي :-
* اضغط من لوحة المفاتيح على Ctrl+F .
* ضع البرمجية التالية ,[ في حقل البحث ومن ثم Enter من لوحة المفاتيح .
* قم باضافة اللغة البرمجية التالية قبل ,[  كما يلي.
{
  label: “ماك ميني”,
  legendEntry: true,
  data: 3.44,
  offset: 0
 }
],
10- بعد الانتهاء من التعديل و تحديث البيانات , قم بالضغط من لوحة على زري Ctrl+S لحفظ التعديلات .

بعد اجراء التعليمات في الشرح , بامكانكم الذهاب إلى صفحة الـ Index بالنقر عليها ستلاحظ الشكل التالي , قم بتمرير زر الفأره على الرسم البياني ستلاحظ وجود النسبة المئوية المدخلة في كل بند قمت بالتغيير عليه في البرمجيات السابقة:-
نظرة اعمق
اليكم امثلة اكثر تعمقاً في تصميم لوحات تفاعلية ادائية باستخدام تقنية Wijmo .
– المبيعات 

– الهواتف المتحرك ( اداء المبيعات عبر اجهزة الجيل الرابع )
اخيراً وليس آخراً ملفات المشروع الخاصة بشرح اليوم , قم بالضغط على زر التحميل ادناه لتحميل الملف المضغوط , لاثراء المزيد من الشروح و الدروس المتخصصة في المجال التقني و التصاميم التفاعلية الذكية تابعونا على تويتر و الفيس بوك .
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s