نمودارها و گراف ها نمايش گرافيکي از اطلاعات و ارقام هستند که به شيوه اي قابل درک سازماندهي شده و نشان دهنده مجموعه اي از داده هاي عددي يا کيفي به صورت کلي براي تجزيه و تحليل مي باشند انواع نمودارها مانند ميله اي، خط شکسته و دايره اي در صفحات وب مورد استفاده قرار مي گيرند. اگر شما نيز به طراحي وب مشغوليد تا کنون شده از سر و کله زدن با طراحي نمودار هاي گنگ و غير قابل فهم خسته شده باشيد؟
تکنيکهايي در طراحي وب وجود دارند که تعداد تصاوير ثابت را کاهش داده و به ايجاد محتواي قابل دسترس بيشتر از نمودار ها و گراف ها کمک مي نمايند. تکنيک هايي که از 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 است که به طراح کمک مي کند به ترسيم نمودار هايي با ظاهر زيبا و از نوع کلاينت ايجاد کند. از ويژگي هاي آن مي توان به سادگي در رابط کاربري، ويژگي هايي مانند زوم و رديابي ماوس اشاره کرد ، اما محدوديت در ترسيم نمودارها از نقاط ضعف آن است.

ويژگي ها :
- ايجاد نمودارها و ترسيمات گرافيکي
- بهره مندي از ويژگي هاي خاص : زوم و ردگيري نشانگر ماوس
- امکان استفاده ساده و آسان
- پشتيباني از: اينترنت اکسپلورر نسخه هاي 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) مورد استفاده قرار داد.

ويژگي ها :
- ايجاد نمودار هاي درون خطي کوچک
- امکان سفارشي سازي اندازه ها و رنگ هاي نمودار
- بهره مندي از تعداد فراوان سبک ها: نمودارهاي هاي درون خطي، نمودار ميله اي ، Tristate ، نمودار گسسته ، گراف جعبه اي ، نمودار دايره اي و نمودار گلوله اي.
- برخورداري از توابع اضافي: سرعت ماوس ، مقادير منفي ، آستانه (threshold)
- پشتيباني از : فايرفاکس 2 به بالا، سافاري 3 به بالا ، اپرا 9 ، گوگل کروم و اينترنت اکسپلورر 6 ، 7 و 8

jqPlot
 

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

ويژگي ها :
- برخورداري از گزينه هاي متعدد سبک دهي به نمودارها و گرافها.
- محور تاريخ با قالب بندي قابل تنظيم.
- طراحي حداکثر 9 محور Y.
- محور چرخش متن.
- محاسبه خودکار گرايشات خطوط در نمودارها.
- امکان افزودن نکات حاشيه نويسي (Tooltips و برجسته سازي و هايلايت نقاط.
- پيش فرض هاي مناسب براي سهولت استفاده.
- پشتيباني از : اينترنت اکسپلورر 6 ، 7 و 8 ، فايرفاکس ، سافاري و اپرا

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

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

Fusion Chart Free
 

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

ويژگي ها :
- برخورداري از بسياري از نيازهاي اساسي طراح در هنگام خلق نمودار
- ارائه 22 نمونه از محبوب ترين سبک هاي نمودارها مانند ستوني ، خطي ، دايره اي، ميله اي ، مساحتي، انباشته، شمعداني و نمودار قيفي ، که در تمام مرورگرها وب به يک شکل به نمايش در مي ايد.
- نمودارها و جداول تعاملي و پويا نما که به ظاهر برنامه هاي طراحي شده شما جلوه اي حرفه اي مي بخشد.
- سازگاري با پي اچ پي، ASP.NET ، JSP ، ColdFusion ، پايتون، RoR ، صفحات HTML ساده و حتي فايل هاي پاورپوينت.
- همه نمودار ها مي توانند اطلاعات مورد نياز را از هر پايگاه داده استخراج کرده و از قابليت AJAX برخوردار هستند.

amCharts
 

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

ويژگي ها :
- سبک هاي نموداري مختلف: دايره اي توپر و توخالي، خطي و سطحي، ستوني و ميله اي و پراکنده و حبابي!
- قابليت ترسيم نمودار ها و جداول به صورت دو بعدي يا سه بعدي.
- قابليت استخراج داده ها از فايل هاي CSV و يا XML.
- توانايي خواندن اطلاعات نوشته شده با پي اچ پي ، دات نت ، جاوا ، Ruby on Rails ، پرل ، ColdFusion ، و بسياري زبان هاي برنامه نويسي ديگر.

AnyChart
 

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

ويژگي ها :
- سازگاري با انواع سيستم عامل ها و انواع مرورگرهاي وب.
- توانايي ترسيم نمودار هاي دايره اي، ميله اي ، خطي ، شمعدان مانند، سطحي، ستوني ، حبابي، منحني، نقطه / مارکر ، پراکنده ، جداول شمعدان مانند و حلقه اي.
- سازگاري کامل با ASP.NET ، ASP ، PHP ، JSP ، ColdFusion ، Ruby on Rails ، صفحات HTML ساده و همچنين فايل هاي پاورپوينت .

XML/SWF Charts
 

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

ويژگي ها :
- قابليت طراحي و خلق سريع نمودارها و گرافها از داده هاي استاتيک و يا پويا (با هر زبان برنامه نويسي صفحات وب)
- قابليت به روز رساني کامل و جريان داده ها بدون نياز به بارگذاري مجدد صفحه وب.
- پيمايش تعاملي (هر تعداد از دادهها و اطلاعات )، امکان زوم براي دريافت اطلاعات تکميلي، چرخش سه بعدي نمودار، توانايي قرار دادن پيوند ها، راهنمايي ها ، برچسب ها ، و غيره
- انتقال بين تصاوير (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 مي توان منتظر يک نمودار اماده براي ارائه در سايت يا استفاده در موارد ديگر بود!

سخن پاياني
 

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

منبع:مجله اينترنتي گوياآي‌تي
ارسال توسط کاربر محترم سايت :omid_a98