zingchart موقع يسمح لك بتصميم البيانات من خلال الأكواد الجاهزة

1 min read

هناك العديد من المواقع الإلكترونية التي تساعد على رسم المخططات البيانية والخرائط الجغرافية التفاعلية مثل infogr.am وvizzlo وdatawrapar، لكنها تبقى محدودة الإمكانية مما يجعل الاعتماد عليها يقتصر علي ما هو متوفر من رسوم ومخططات بيانية، بينما يوفر موقع zingchart مساحة أكبر من المرونة في الاستخدام وعدد أكبر من المخططات.

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

في هذا الموضوع سوف نوضح لك كيفية استخدام هذه المكتبة لبناء الرسم البياني الخاص بك ولكن أولا هناك بعض المعلومات التي يجب عليك معرفتها حتى ولو معرفه سطحيه عن ثلاث لغات برمجية هي HTML, CSS, Java Script حيث يعد الإلمام بأساسيات ضرورة ملحة لاستخدام Zingchart.

 

خطوات العمل

في البداية ينبغي عليك التسجيل في الموقع لتتمكن من استخدام كافة خواصه بمرونه.

قم باختيار نوع المخطط الذي تود في تصميمه من القائمة المدرجة بالصفحة الرئيسية للموقع.

اختر واحدً من بين الأنماط المختلفة المتوفرة لرسم المخطط.

وبعد أن تختار من التصميمات المتاحة سيظهر لك الرسم الذي قمت باختياره مصحوبًا بثلاث نوافذ يحتوي كل منها علي لغة ترميز مختلفة هما HTML ,CSS ,JavaScript. يمكنك تنزيل الكود الخاص بالرسم البياني للتعديل به علي الجهاز الخاص بك أو أن تختار التعديل أون لاين من خلال زر edit on codepen

يظهر أعلى يمن الصورة الجزء الخاص بكود HTML وهو الجزء الذي لا تحتاج إلي تعديله لإنه خاص باسترداد الاداه (zingchart) من المكان الخاص بها. أما الجزء الخاص بكود CSS فيمكنك من خلاله تعديل حجم الرسم البياني الارتفاع الخاص به.

الجزء الأهم هو الجزي الخاص بكود Javascrip، هذا الجزء هو الأهم علي الاطلاق لأنه يحتوي على البيانات التي تشكل المخطط البياني ويمكنك من خلاله تغيرها كما تشاء ويمكنك أيضا تغير الألوان الخاصة بهذا الرسم كما تشاء. على سبيل المثال يمكننا البدأ بتغير المتغيرات الخاصة بالرسم في الكود Javascript على النحو التالي:

اكلمة var تعني متغير اي يمكنك تغيره كما تشاء فمثلا var bgColors  تعني متغير وبه كل ألوان الرسم البياني ويمكن تغيره بألوان أخرى كما تشاء، لتغير البيانات أو الأرقام داخل المخطط البياني فقط دون التعديل في الألوان والأحجام ابحث بداخل المتغير myconfig عن كلمة series

وعند تغير الارقام التي بداخل series إلي هذه القيم مثلاً

سوف نلاحظ تغيرًا في المخطط البياني كما يظهر في الرسم التالي: