ایجاد Bar Charts و Point Charts با SVG در HTML5

Point Charts با SVG

این مقاله نحوه ی ایجاد یک Bar Chart و Point Chart در HTML5 به صورت گام گام و با استفاده از Scalable Vector Graphics را نشان خواهد داد.ابتدا به توضیح کامل در مورد SVG میپردازیم و سپس به نحوه ی استفاده از آن برای ایجاد Point Chart و Bar Chart میپردازیم.علاوه بر تصاویر و توضیحات کامل در ادامه یک دمو نیز برای درک بهتر برایتان قرار داده ام …

معرفی Point Charts با SVG

Scalable Vector Graphics (SVG) یک فرمت تصویر بردار بر اساس XML برای گرافیک های دو بعدی است که توسط World Wide Web Consortium (W3C) در سال ۱۹۹۹ منتشر شد. تصاویر SVG و رفتار آن ها در فایل های متنی XML تعریف شده است که به این معناست که به آنها قابلیت جستجو ، فهرست بندی ، صفحه بندی و فشرده سازی را میدهد. از آنجایی که فایل های XML میتوانند با هر text editor ای ایجاد و ویرایش شوند ، تصاویر SVG نیز میتوانند توسط هر text editor ای ایجاد و ویرایش شوند. تمام مرورگر های مشهور از قبیل IE ، Google Chrome ، Mozilla FireFox ، Safari و Opera حداقل هرکدام از چند درجه ی رندر SVG پشتیبانی میکنند.

در زیر برخی از مزایای استفاده از گرافیک SVG آورده شده است :

بر اساس متن است

Open Source است

در فرمت XML نوشته شده است.

یک استاندارد گرافیک W3C رسمی است.

داینامیک است و قابلیت ارتقا دارد.

سازگار با مرورگر های Cross

میتوان آن را به صورت انیمیشن درآورد.

علاوه بر این ها ، تصاویر SVG :

مقیاس پذیر هستند.

میتوانند با هر رزولوشینی با کیفیت عالی چاپ شوند.

میتوانند در هر سطحی بدون افت وضوح زوم کنند.

با تغییرات تکنولوژی ، برنامه نویسان نیز تغییرات زیادی دیدند.

کاربران تقاضای قابلیت رابط کاربری بهتری با مقداری گرافیک و انیمیشن فوق العاده در برنامه های وب شان در هر دو سوی مرورگر و دستگاه های موبایل کردند. با معرفی برخی از ویژگی های جدید ارائه شده در HTML5 ، میتوانیم این تقاضا ها را به آسانی انجام دهیم.

HTML 5 از SVG های درون خطی پشتیبانی میکند. همانطور که میدانیم SVG ویژگی جدیدی نیست و در سال ۱۹۹۹ معرفی شده است. اما اکنون HTML5 آن را با تگ <svg> پشتیبانی میکند. SVG ها فوق العاده اند و میتوانند فشرده سازی و مقیاس پذیر شوند.

ساخت بردار با استفاده از SVG

در زیر روش ساخت یک بردار با استفاده از SVG آورده شده است :

گام اول

قسمت Preview ویژوال استودیوی ۲۰۱۲/۲۰۱۳/۲۰۱۵ یا هر ویرایشگر HTML5 را باز کنید. ما از Preview ویژوال استویدوی ۲۰۱۵ استفاده میکنیم. حال یک برنامه ی ASP.NET با انتخاب WebApplication قالب برنامه WebApplication میسازیم و نامی مناسب با موقعیت مکانی و مشخصات ظاهری برای آن انتخاب میکنیم.

Point Charts با SVG

حال یک قالب پروژه ی آماده ی خالی را انتخاب کنید.

Point Charts با SVG

در این پروژه یک صفحه ی HTML بیافزایید و نام آن را SVGChart.html بگذارید.

Point Charts با SVG

گام دوم

در صفحه ی SVGChart.html کد HTML زیر را به بخش بدنه بیافزایید :

Point Charts با SVG

همانطور که میبینیم ، ما یک المان <svg> در کد Markup بالا مشخص کرده ایم. ما از این المان به عنوان یک منبع برای المان های موردنیاز به کشیدن نمودارها استفاده میکنیم.

گام سوم

بیایید یک نمودار داده ی آزمون دانش آموزی بر اساس آرایه ی زیر ایجاد کنیم. میتوانیم داده ها را در یک آرایه همانند زیر نمایش دهیم :

Point Charts با SVG

گام چهارم

به منظور رسم نمودار ، ما نیاز به مشخص کردن محور X ها و Y ها و تنظیم ابعاد برای آن با مشخص کردن متغیر های زیر داریم:

Point Charts با SVG

گام پنجم

بگذارید خصوصیات ابعاد نمودار را برای طول و عرض همانند زیر مشخص کنیم :

Point Charts با SVG

گام ششم

المان خط نیز باید به صورت داینامیکی برای کشیدن محور های X و Y به SVG اضافه شود ، همانند زیر :

Point Charts با SVG

گام هفتم

پس از کشیدن محور های X و Y احتیاج به مشخص کردن نشانگر ها بر روی آنها داریم. با استفاده از داده های ذخیره شده در یک آرایه ، احتیاج به RollNo بر روی محور X و Marks بر روی محور Y ها داریم. برای نمایش نشانگر ها احتیاج به خواندن آرایه های داده ذخیره شده و افزودن بر اساس TextNode در SVG به صورت داینامیکی داریم ؛ همانند زیر :

Point Charts با SVG

گام هشتم

با دوبار فراخوانی تابع drawXYAxis() پروسه ی کشیدن محور ها و نشانگر ها به اتمام میرسد. یک بار برای محور X و بار دیگر برای محور Y و تابع drawMarkers() برای افزودن نشانگر ها بر روی آنها :

Point Charts با SVG

گام نهم

نیاز به افزودن مستطیل هایی در SVG برای تولید Bar Chartsو مشابه همان به بیضی در SVG برای تولید Point Charts احتباج داریم. ما متد های drawRectangleForChart() و drawEllipse() را برای افزودن هر دو همانند زیر نشان میدهیم :

Point Charts با SVG

گام دهم

برای تولید ابعاد مورد نیاز برای مستطیل و بیضی ، احتیاج به خواندن RollNo و نشانگر ها به ازای هر rollno از آرایه ی studentexamdata داریم. همچنین باید مختصات را نیز بر اساس طول مستطیل تنظیم کنیم و ابعاد بیضی در زیر آورده شده است :

Point Charts با SVG

گام یازدهم

احتیاج به خالی کردن نمودار داریم زیرا ابعاد نمودار همراه با نشانگر ها و محور ها فرزندان SVG هستند ، پس ما از یک متد clear() برای خالی کردن نمودار استفاده میکنیم ؛ همانند زیر :

Point Charts با SVG

گام دوازدهم

بیایید متدی برای drawBarChart() بسازیم تا به کاربران اجازه ی انتخاب نوع نمودار را بدهد. Bar Chart یا Point Chart ، هر یک که مایل به نمایش هستید.

Point Charts با SVG

متد بالا رویداد کلیک دکمه ی رادیویی پس از خواندن المان SVG ، از Document Object Model (DOM) مشترک است. کد اجرا میشود و نمودار بر اساس نوع نمودار انتخابی ساخته میشود.

و اکنون متد را به مرحله ی بارگذاری میبریم با قطعه کد زیر :

window.onload = drawBarChart;

 خروجی

پس از بارگذاری صفحه در یک مرورگر ما صفحه ی زیر را خواهیم دید :

Point Charts با SVG

حال گزینه ی Bar Chart را انتخاب میکنیم.

Point Charts با SVG

حال گزینه ی Point Chart را انتخاب میکنیم.

Point Charts با SVG

لطفا فولدر الحاقی Zip شده را دانلود کنید و از سورس کد برای مشابه سازی در ویژوال استودیو استفاده کنید.

جمع بندی

در این مقاله آموختیم که چگونه Bar Charts و Point Charts با SVG در HTML5 بسازیم.

داریوش فرخی

داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

ما یک پرسشنامه‌ی کوچولو داریم، که قول میدیم وقتتون رو خیلی نمی‌گیره، ولی کلی به ما کمک می‌کنه، چون هم assessment مونه ,و هم شما به ما در این زمینه کمک میکنید.بزن بریم