Draw Interactive Pie Chart ارسم دوائر بيانية تفاعلية

طريقة رسم دوائر تفاعلية ثلاثية الابعاد باستخدام زر ( التحديث ) , ما يتوجب عليك اتقانه لفهم المشروع هو فكرة عن كيفية استخدام اللغة البرمجية HTML وكيفية التعديل على الملفات المتوفرة للتحميل . حيث قمنا في مقالة سابقة بشرح طريقة رسم اعمدة بيانية باستخدا تقنية الـ D3 , بإمكانك رؤية مثال حي للمشروع الموضح بالرسم اعلاه.
الشرح :-

في المثال ترتيب الدول الفائزة بالميداليات الذهبية و الفضية و البرونزية ابتدا من 5/8/2012 حتى 8/8/2012 , ابرز ( 4 ) دول فائزة بأولمبياد لندن 2012 بهذه الميداليات حتى تاريخه تم الاستعانة بالترتيب من الموقع الرسمي LONDON2012.COM .
تحميل الملفات و التعديل:-

قمت برفع الملفات المستخدمة كما في المثال الموضح وبإمكانكم تحميل جميع الملفات بالملف المضغوط هنا , ما عليكم فقط هو فك الضغط و التعديل في محتوى كلاً من الملفين InteractivePieChart.html و example1.js , سأقوم بشرح ما يتوجب تغيره لإنشاء الرسم التفاعلي .
1- التعديل باللغة البرمجية بملف InteractivePieChart.html :-

2- التعديل باللغة البرمجية ( البيانات ) بملف example1.js :-

* بند json:
ثلاثة ألوان معنونة في التوضيح هي ما سيتم تغيره بناء على الميداليات المتوفرة في اولمبياد  لندن وهي الذهبية ( اللون الأزرق ) و الفضية ( اللون الأخضر ) و البرونزية ( اللون البني ). التغيير هنا هو بتاريخ ( 5/8/2012 ) إي ان البيانات المتواجده في هذا البند تعود إلى التاريخ 5/8/2012 .
* بند json2:
أما التغيير في هذا البند هو لتبيان التغير في الفوز بالميداليات بتاريخ 8/8/2012 , وذلك بعد النقر على زر ( التحديث ) , وسيتم تغير الرسم بأسلوب ديناميكي .
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