About


Widgets

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 , وذلك بعد النقر على زر ( التحديث ) , وسيتم تغير الرسم بأسلوب ديناميكي .

الآشهر تصفحاً

Related Posts Plugin for WordPress, Blogger...