طراحی نمودار و گراف با کدها و ابزارهای جذاب برای صفحات وب

  • 1389/8/16
  • محمدرضا ارجمندی
  • 0


نمودارها و گراف ها نمایش گرافیکی از اطلاعات و ارقام هستند که به شیوه ای قابل درک سازماندهی شده و نشان دهنده مجموعه ای از داده های عددی یا کیفی به صورت کلی برای تجزیه و تحلیل می باشند انواع نمودارها مانند میله ای، خط شکسته و دایره ای در صفحات وب مورد استفاده قرار می گیرند. اگر شما نیز به طراحی وب مشغولید تا کنون شده  از سر و کله زدن با طراحی نمودار های گنگ  و غیر قابل فهم خسته شده باشید؟

تکنیکهایی در طراحی وب وجود دارند که تعداد تصاویر ثابت را کاهش داده و به ایجاد محتوای قابل دسترس بیشتر از نمودار ها و گراف ها کمک می نمایند. تکنیک هایی که از CSS ، پلاگین های jQuery و ابزارهای تولید آنلاین چارت استفاده می کنند، تنها برخی از کارهاییست که شما می توانید در زمینه خلق نمودار و گراف های خود انجام دهید.

در این مقاله شما را با برخی از تکنیک های جالب برای خلق نمودار ها و جداول در وب آشنا خواهیم کرد :

1- طراحی نمودارها و جداول با CSS

« CSS (مخفف عبارت Cascading Style Sheet) یک زبان شیوه نامه ایست که برای توصیف معانی و محتوای قابل نمایش (شکل ظاهر و قالب بندی) یک سند نوشته شده در زبان نشانه گذاری مورد استفاده قرار می گیرد.» ( تعریف ویکیپدیا از CSS). این خاصیت سبب تاثیر بر روی مشخصات ظاهری نمایش یک صفحه  وب می گردد. CSS  با زبان های HTML, XHTML  و  XML سر و کار دارد. در اینجا به معرفی تکنیک هایی که با استفاده از  CSS  سبب فرم دهی به نمودار و جداول موجود در صفحات می گردند می پردازیم. شخصا فکر می کنم که از مفید ترین ویژگی CSS این است که شیوه سبک دهی و طراحی با ان به گونه ایست که سبب سبک تر شدن صفحه وب ساخته شده گشته و به خصوص برای کاربرانی که از اینترنت با سرعت کم و با پهنای باند کمتر استفاده می کنند صفحه سریع تر بارگذاری شده و امکان دانلود سریع تر را برای بازدید کنندگان شما فراهم می کنند و این یعنی تعداد بازدید کنندگان بیشتر برای صفحه وب شما!

مشکلات مرورگر یکی از نقطه ضعف های به کارگیری CCS است چرا که CCS  در مرورگرهای مختلف به طرز یکسانی محتوا را نمایش نمی دهد. مثلا نسخه های قدیمی تر اینترنت اکسپلورر یا نت اسکیپ فقط یک صفحه ساده اچ تی ام ال را به کاربر نشان می دهند که به هیچ روی با صفحه زرق و برق دار نمایش داده شده در مرورگر های مدرنی مثل فایرفاکس یا نسخه های جدید نت اسکیپ قابل قیاس نیست.

نمودار میله ای عمودی با CSS

تکنیکی که با استفاده از آن می توان عناصر نامرتبی از لیست را در ارتفاع و عرض معینی و به شکل نمودار میله ای مرتب کرد: موقعیت یابی هر 4 کوارتر با استفاده از عنصر ul موقعیت: شیوه ای مطلق و پرکاربرد. عنصر div  هم برای ایجاد میله های افقی استفاده می شود. برای اضافه کردن رنگ ها، باید از عناصر تصویر رنگی CSS استفاده کنیم.

نمودار خط شکسته با CSS

نمودار خط شکسته ساده ترین راه نمایش و سازماندهی داده هاست. اگر شما در استفاده از زبان برنامه نویسی برای ایجاد گراف خط شکسته راحت نیستید، این شیوه ایجاد نمودار خطی با استفاده از  CSS  به شما سهولت در ارائه اطلاعات خود را اهدا می کند. ترکیبی از روح CSS و موقعیت یابیست که گراف خطی را در صفحه شبیه سازی می کند. این تکنیک از عنصر تعریف لیست (DL) استفاده می کند که نمایش دهنده دستگاه مختصات است.

برای تماشای دمو اینجا را کلیک کنید.

نمودار میله ای تجمعی با CSS

مقالات بسیاری در مورد ایجاد نمودار های میله ای نوشته شده اما در مورد طراحی گرافهای تجمعی (stacked) بحث و بررسی زیادی صورت نگرفته است. نمودار های میله ای انباشته معمولا در جاهایی کاربرد دارند که یکنواخت ترین سری داده ها در قسمت پایین درج شده تا به دست آوردن یک بینش کلی در مورد داده ها برای کاربر آسان تر گردند. HTML  و  CSS در ایجاد یک نمودار میله ای انباشته CSS  دست به دست هم می دهند. در این هنگام طراح از لیست تعریفی (DL) برای ارائه داده ها در شکل سازمان دهی شده بهره می برد. تگ های <dt>  و  <dd> به صورت پویا برای دسترسی به محتوای گراف استفاده می شود و سبک دهی به نمودار با استفاده از CSS آسان تر انجام می پذیرد.

ایجاد نمودار دایره ای با CSS3

Pie chart  یا نمودار دایره ای یک گراف به شکل دایره تقسیم بندی شده است که قطاع های  آن متناسب با سهم هر یک از داده هاست. این نمودارها معمولا به صورت درصد ارقامی را بیان می کنند. این تکنیک فقط در مرورگرهای فایرفاکس ، کروم ، نسخه بروز رسانی شده سافاری و اپرا عمل می کند به دلیل آن که قرار است از نسخه سوم سی اس اس (CSS3) کنیم. با استفاده از عنصر div  یک دایره و شعاع های آن را ایجاد می کنیم. با استفاده از خاصیت کلیپ نشان دادن تنها نیمی از دایره را فعال می کنیم. با انباشتن تمام عناصر نمودار دایره ای و چرخش آن را با میزان درصد هر یک از فاکتور ها و در نهایت اضافه کردن خاصیت رنگ پای چارت شما آماده است.

برای تماشای دمو اینجا کلیک کنید.

گراف میله ای پیچیده با CSS

اطلاعات مربوط به مسائل عشقی، مطالب آموزشی، بازی دنیای وارکرافت و چند چیز متنوع دیگر را می خواهید در گراف خود لحاظ کنید. آیا طراحی یک نمودار یکپارچه که ترکیبی از چند نمودار مجزاست برایتان آسان است یا سخت؟ با استفاده از این تکنیک گراف میله ای پیچیده، یک نشانگر از موقعیت مارکر برای تعیین اطلاعات شما استفاده می کند. طرح رنگی نیز در شناسایی داده ها از رنگ روشن به رنگ تیره تر به فهم و تجزیه و تحلیل بهتر کمک می کند. با کمک تگ های  <dl>، <dt>، و <dd>به همراه   CSS ، آماده طراحی خلاقانه خواهید بود.

2- پلاگین های jQuery برای نمودارها و گرافها

«jQuery یک کتابخانه و آرشیو از کدهای جاوا اسکریپت با قابلیت سازگاری با مرورگرهای مختلف است که به منظور برای ساده تر کردن برنامه نویسی از سوی کلاینت (client-side scripting) HTML طراحی شده.»  (تعریف ویکیپدیا).

پلاگین های jQuery ابزارهایی برای گسترش قابلیت های برنامه های کاربردی محسوب می گردند. این ها پلاگین های با نصب بسیار آسان هستند که سبب کاهش کار طراحی در زمینه برنامه نویسی می گردند. در ادامه به آشنایی مختصر با 3 پلاگین jQuery محبوب و پرکاربرد برای نمودارها و گراف ها می پردازیم.(توضیحات بیشتر را با کلیک روی لینک هر مطلب می توانید خودتان مطالعه کنید.) مزایای استفاده از jQuery را می توان در مواردی همچون طراحی سبک و عدم نیاز به پهنای باند برای بارگذاری صفحات ، طراحی آسان و سریع ، نوشتن خطوط کمتر  اما بدست اوردن توانمندی های بیشتر، سازگاری با مرورگر های مختلف، یکپارچگی آسان و مفید با برنامه های کاربردی و چند مورد مفید دیگر برشمرد.

Flot

Flot  یک آرشیو خالص ترسیم نموداری جاوا اسکریپت برای jQuery است که به طراح کمک می کند به ترسیم نمودار هایی با ظاهر زیبا و از نوع کلاینت ایجاد کند. از ویژگی های آن می توان به سادگی در رابط کاربری، ویژگی هایی مانند زوم و ردیابی ماوس اشاره کرد ، اما محدودیت در ترسیم نمودارها از نقاط ضعف آن است.

نسخه ی دموی Flot | | دانلود  Flot

ویژگی ها :

–       ایجاد نمودارها و ترسیمات گرافیکی

–       بهره مندی از ویژگی های خاص : زوم و ردگیری نشانگر ماوس

–       امکان استفاده ساده و آسان

–       پشتیبانی از: اینترنت اکسپلورر نسخه های 6،7،8 با تگ بوم HTML (راهنمای شبیه ساز جاوا اسکریپت excanvas  برای اینترنت اکسپلورر استفاده می شود) ، فایرفاکس .x2 به بعد، سافاری .x3 به بعد ، اپرا 9.5 به بالا و کانکرر .x4 به بالا.

jQuery Sparklines

Sparklines  نیز یک ابزار ترسیم نمودارهاست که بیشتر در مورد آمار و داده های آماری کاربرد دارد. این ابزار معمولا برای نمایش تصویری آمار و ارقام فعالیت های بازار سهام، درجه حرارت و یا اندازه گیری ها استفاده می شود. آقای ادوارد توفت sparklines  را به این شکل توصیف می کند: « کار با داده های فراوان، طراحی ساده ، و گرافیک با حجم کلمات». این شرح  کارهائیست که شما در صفحه وب خود نیاز به انجام دادنش دارید : 1 کتابخانه جاوا اسکریپتی jQuery  که باید در صفحه باگذاری گردد- حداقل نسخه 1.2 و یا بالاتر 2- یک کپی از jquery.sparkline.js بارگذاری شده در صفحه که می توانید ان را از این سایت دانلود کنید، 3- تگ داخلی بر روی صفحه که در آن عبارت sparkline  (به عنوان مثال) نمایش  داده شود  و 4-فراخوانی تابع sparkline()  برای نمایش sparkline در عمل.

ویژگی های اسپارک لاین شامل ترسیم انواع نمودار های خطی، میله ای ، بار و سه حالته (tristate) ، نمودار گسسته ، گراف گلوله ای ، گراف دایره ای، و پلات های جعبه ایست. این پلاگین  توسط گَرِت واتز (Gareth Watts) نوشته شده است. همچنین نکته جالب دیگری که متوجه شدم این است که Sparklines را  همچنین می توان مایکروسافت اکسل 2010 برای نشان دادن روند تمایل داده ها (data trends) مورد استفاده قرار داد.

نسخه ی نمایشی Sparklines | | دانلود Sparkline

ویژگی ها :

–       ایجاد نمودار های درون خطی کوچک

–       امکان سفارشی سازی اندازه ها و رنگ های نمودار

–       بهره مندی از تعداد فراوان سبک ها: نمودارهای های درون خطی، نمودار میله ای ، Tristate ، نمودار گسسته ، گراف جعبه ای ، نمودار دایره ای و نمودار گلوله ای.

–       برخورداری از توابع اضافی: سرعت ماوس ، مقادیر منفی ، آستانه (threshold)

–       پشتیبانی از : فایرفاکس 2 به بالا، سافاری 3 به بالا ، اپرا 9 ، گوگل کروم و اینترنت اکسپلورر 6 ، 7 و 8

jqPlot

jqPlot  نیز یکی از الحاقات jQuery برای رندر کردن کامل نمودار های جاوا اسکریپت طراحی شده توسط کلاینت در صفحات وب شما می باشد. این  اکستنشن یکی از افزونه های بسیار قابل استفاده  و پرکاربرد برای گرافها و نمودارهاست آن هم به دلیل ویژگی های جامعی که ارائه می دهد.

نسخه ی دموی jqPlot | |  دانلود jqPlot

ویژگی ها :

–       برخورداری از گزینه های متعدد سبک دهی به نمودارها و گرافها.

–       محور تاریخ با قالب بندی قابل تنظیم.

–       طراحی حداکثر  9 محور Y.

–       محور چرخش متن.

–       محاسبه خودکار گرایشات خطوط در نمودارها.

–       امکان افزودن نکات حاشیه نویسی (Tooltips و برجسته سازی و هایلایت نقاط.

–       پیش فرض های مناسب برای سهولت استفاده.

–       پشتیبانی از : اینترنت اکسپلورر 6 ، 7 و 8 ، فایرفاکس ، سافاری و اپرا

3- نمودارها و گراف های مبتنی بر فلش

فلش (Flash) ابزاری است که در ایجاد برنامه های کاربردی تعاملی و انیمیشن در وب سایت ها به طراح وب کمک می کند. انیمیشن ها و تصاویر متحرک سرگرم کننده هستند و قطعا تاثیر بیشتری روی  مخاطبان گذارده و در انتقال پیام مدیر سایت به مخاطبان و بازدیدکنندگان نقش مهمی را ایفا می کنند.

Fusion Chart Free

فیوژن چارت یک ابزار رایگان مبتنی بر فلش است که به طراح وب امکان  ایجاد  نمودارهای تعاملی  و متحرک مبتنی بر فلش برای برنامه های کاربردی  تحت وب، نرم افزار های دسکتاپ و فایل های پاورپوینت (presentations) او را می دهد.

نسخه ی دموی Fusion Chart | | دانلود Fusion Chart

ویژگی ها :

–       برخورداری از بسیاری از نیازهای اساسی طراح در هنگام خلق نمودار

–       ارائه 22 نمونه از  محبوب  ترین سبک های نمودارها مانند ستونی ، خطی ، دایره ای، میله ای ، مساحتی، انباشته، شمعدانی و نمودار قیفی ، که در تمام مرورگرها وب به یک شکل به نمایش در می اید.

–       نمودارها و جداول تعاملی و پویا نما که به ظاهر برنامه های طراحی شده شما جلوه ای حرفه ای می بخشد.

–       سازگاری با پی اچ پی، ASP.NET ، JSP ، ColdFusion ، پایتون، RoR ، صفحات HTML  ساده و حتی فایل های  پاورپوینت.

–       همه نمودار ها می توانند اطلاعات مورد نیاز را از هر پایگاه داده استخراج کرده و از قابلیت AJAX  برخوردار هستند.

amCharts

AmCharts  در واقع محدوده بزرگ و قابل سفارشی سازی از مجموعه نمودارها را به طراح وب ارائه می دهد. استفاده دینامیک از این محصول مبتنی بر وب قطعا سبب تبدیل اطلاعات خام شما به نمودارهایی  بزرگ و عالی می گردد.

نسخه ی دموی amCharts | |دانلود amCharts

ویژگی ها :

–       سبک های نموداری مختلف: دایره ای توپر و توخالی، خطی و سطحی، ستونی و  میله ای و پراکنده و حبابی!

–       قابلیت ترسیم نمودار ها و جداول به صورت دو بعدی یا سه بعدی.

–       قابلیت استخراج داده ها از فایل های CSV و یا XML.

–       توانایی خواندن اطلاعات نوشته شده با پی اچ پی ، دات نت ، جاوا ، Ruby on Rails ، پرل ، ColdFusion ، و بسیاری زبان های برنامه نویسی دیگر.

AnyChart

AnyChart  به کاربران خود یک مولفه ترسیم نموداری پویا و  مبتنی بر فلش ارائه می دهد. این برنامه یک محصول XML است که سازگار با هر نوع فرمت و قالب بندی داده هاست. هر چند این ابزار رایگان نیست، اما در عوض به همه علاقه مندان به طراحی یک نسخه آزمایشی برای کاربرانی که دفعه اولشان است از برنامه استفاده می کنند ارائه می کند، اما اگر می خواهید توانمندی های بالقوه این ابزار  را به حداکثر برسانید، 649  دلار همه پولیست که برای خرید یک لایسنس ان نیاز دارید.

نسخه ی دموی AnyChart | | دانلود AnyChart

ویژگی ها :

–       سازگاری با انواع سیستم عامل ها و انواع مرورگرهای وب.

–       توانایی ترسیم نمودار های دایره ای، میله ای ، خطی ، شمعدان مانند، سطحی، ستونی ، حبابی، منحنی، نقطه / مارکر ، پراکنده ، جداول شمعدان مانند و حلقه ای.

–       سازگاری کامل با ASP.NET ، ASP ، PHP ، JSP  ، ColdFusion ، Ruby on Rails ، صفحات HTML  ساده و همچنین فایل های پاورپوینت .

XML/SWF Charts

برنامه XML/SWF Charts  یک  ابزار انعطاف پذیر و پویا  در تولید نمودارها و جداول گرافیکی است که بهترین کیفیت گرافیکی ممکن را به عنوان نتیجه نهایی پیش روی طراح می گذارد.

نسخه ی دموی XML/SWF | |  دانلود XML/SWF

ویژگی ها :

–       قابلیت طراحی و خلق سریع نمودارها و گرافها از داده های استاتیک و یا پویا (با هر زبان برنامه نویسی صفحات وب)

–       قابلیت به روز رسانی کامل و جریان داده ها بدون نیاز به بارگذاری مجدد صفحه وب.

–       پیمایش تعاملی (هر تعداد از دادهها و اطلاعات )، امکان زوم برای دریافت اطلاعات تکمیلی، چرخش سه بعدی نمودار، توانایی قرار دادن پیوند ها، راهنمایی ها ، برچسب ها ، و غیره

–       انتقال بین تصاویر (transitions) با جلوه پویا و انیمیشن و افکت های فلش با کیفیت گرافیکی بالا ، از جمله توانایی اعمال افکت های آنتی الایز ، شفاف سازی (ترنسپرنت) ، سایه دار ، برجسته ، تلالو دار ، و بلور کردن فونت ها.

–       حالت تمام صفحه ، نمودار های مقیاس پذیر ، قابلیت چاپ نمودارها ، و خروجی گرفتن از انها به فرمت بیت مپ.

–       قابل استفاده در برنامه های کاربردی فلش ، برنامه های کاربردی وب و با پشتیبانی از ارتباطات جاوا اسکریپتی.

–       پشتیبانی از متن یونیکد برای نمایش کاراکترهای خاص و زبان های مختلف.

–       برخورداری از طیف متنوعی از انواع نمودارها.

4-ابزارهای انلاین طراحی نمودارها و جداول

آیا از کد نویسی مداوم و طولانی خسته شده اید و فقط می خواهید به خلق نمودار ها و جداول دلخواه خود به روشی ساده و به دور از برنامه نویسی بپردازید و در صفحات وب از آنها استفاده کنید؟

در ادامه مقاله به معرفی برخی از ابزارهای کاربردی و آنلاین طراحی نمودار ها و جداول می پردازیم:

Max’s Chart

«نمودار مکس» راهی آسان برای طراحی نمودارهاست که به  تولید خروجی CSS می پردازد و همچنین می توانید روی این فایل خروجی به ویرایش به منظور سفارشی کردن  و رسیدن به سبک دلخواه خود بپردازید.

DIY Chart

DIY  Chart  (همانطور که می دانید DIY   مخفف Do It Yourself یا «خودت انجام بده» می باشد ) ابزاری مبتنی بر وب است که به شما اجازه ایجاد نمودار و گراف را در هر زبان کد نویسی (scripting) که بخواهید از استاتیک گرفته تا پویا می دهد. برخی از ویژگی هایی که این ابزار ارائه می دهد عبارتند از: رابط کاربری  دوستانه و کاربر پسند ، برخورداری از انواع نمودارها ، پشتیبانی از انواع فرمت های رایج داده ها و پشتیبانی از زبان های مختلف و….

Kid’s Zone

چه کسی گفته که گراف ها و نمودار هرگز برای بچه ها سرگرم کننده و مفرح نبوده اند؟ این سایت  بهترین و آسان ترین راه برای خلق نمودارهایی جالب و کودکانه پیش روی طراحان سایت های کودکان و نوجوانان قرار می دهد. با نگاهی به مطالب آموزش دوستانه خلق گراف های این سایت، مطمئنا بچه ها استفاده از این سایت را برای انجام تکالیف خود (وقتی نیاز به رسم نمودار پیدا کنند) دوست خواهند داشت.

Onlinecharttool

طراحی و به اشتراک گذاری نمودارها به صورت رایگان. Onlinecharttool بهترین راه برای به اشتراک گذاشتن انواع متعددی از نمودار ها و جداول به صورت کاملا رایگان .

Highcharts

Highcharts  یک کتابخانه و آرشیو جامع از نمودارها و گرافها است که به زبان خالص جاوا اسکریپت نوشته شده است. Highcharts در حال حاضر از ترسیم نمودار های خطی ، منحنی ، سطحی، ستونی ، میله ای ، دایره ای و پراکندگی پشتیبانی می کند.

Google Chart Generator

آماده استفاده از یک تولید کننده نمودار قدرتمند باشید. فقط کافیست فیلدهای مورد نیاز را با اطلاعات مناسب تکمیل کنید و کار تمام است: با فشردن دکمه Chart It می توان منتظر یک نمودار اماده برای ارائه در سایت یا استفاده در موارد دیگر بود!

سخن پایانی

تجزیه و تحلیل آماری هیچ گاه سرگرمی خوبی برای گذران اوقات فراغت نبوده! اما با کمک ابزارهای موجود و کد نویسی برای هر چه بهتر کردن ارائه های خود راه ساده تری پیش رو خواهید داشت. فقط با یک کد و یا با چند کلیک کافیست که پرزنتیشن شما و چگونگی خلق ماهرانه نمودارها اصلی ترین بحث در جلسات شما با دوستان و حضار باشد. از هر تکنیک این مقاله  که می خواهید استفاده کنید، همیشه سعی کنید قبلش دیگر روش های را  هم آزمایش کنید تا بهترین روش یا ابزار کار  را که بیشتر با آن  راحت هستید و بیشتر مناسب حالتان است را بیابید.

منبع: 1stwebdesigner

دیدگاه خود را وارد کنید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *