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

اشتراک:

نمودارها و گراف ها نمایش گرافیکی از اطلاعات و ارقام هستند که به شیوه ای قابل درک سازماندهی شده و
نشان دهنده مجموعه ای از داده های عددی یا کیفی به صورت کلی برای تجزیه و تحلیل می باشند انواع
نمودارها مانند میله ای، خط شکسته و دایره ای در صفحات وب مورد استفاده قرار می گیرند.
اگر شما نیز به طراحی وب مشغولید تا کنون شده از سر و کله زدن با طراحی نمودار های گنگ
و غیر قابل فهم خسته شده باشید؟ تکنیکهایی در طراحی وب وجود دارند که تعداد تصاویر ثابت را کاهش داده
و به ایجاد محتوای قابل دسترس بیشتر از نمودار ها و گراف ها کمک می نمایند.
تکنیک هایی که از CSS ، پلاگین های jQuery و ابزارهای تولید آنلاین چارت استفاده می کنند، تنها برخی از
کارهاییست که شما می توانید در زمینه خلق نمودار و گراف های خود انجام دهید.
طراحی نمودار و گراف با کدها و ابزارهای جذاب برای صفحات وب در این مقاله شما را با برخی از
تکنیک های جالب برای خلق نمودار ها و جداول در وب آشنا خواهیم کرد : ۱- طراحی نمودارها و جداول
با CSS « CSS (مخفف عبارت Cascading Style Sheet) یک زبان شیوه نامه ایست که برای توصیف معانی و محتوای
قابل نمایش (شکل ظاهر و قالب بندی) یک سند نوشته شده در زبان نشانه گذاری مورد استفاده قرار می گیرد.»
( تعریف ویکیپدیا از CSS).
این خاصیت سبب تاثیر بر روی مشخصات ظاهری نمایش یک صفحه وب می گردد.
CSS با زبان های HTML, XHTML و XML سر و کار دارد.
در اینجا به معرفی تکنیک هایی که با استفاده از CSS سبب فرم دهی به نمودار و جداول موجود در
صفحات می گردند می پردازیم.
شخصا فکر می کنم که از مفید ترین ویژگی CSS این است که شیوه سبک دهی و طراحی با ان
به گونه ایست که سبب سبک تر شدن صفحه وب ساخته شده گشته و به خصوص برای کاربرانی که از
اینترنت با سرعت کم و با پهنای باند کمتر استفاده می کنند صفحه سریع تر بارگذاری شده و امکان دانلود
سریع تر را برای بازدید کنندگان شما فراهم می کنند و این یعنی تعداد بازدید کنندگان بیشتر برای صفحه وب
شما! مشکلات مرورگر یکی از نقطه ضعف های به کارگیری CCS است چرا که CCS در مرورگرهای مختلف به طرز
یکسانی محتوا را نمایش نمی دهد.
مثلا نسخه های قدیمی تر اینترنت اکسپلورر یا نت اسکیپ فقط یک صفحه ساده اچ تی ام ال را به
کاربر نشان می دهند که به هیچ روی با صفحه زرق و برق دار نمایش داده شده در مرورگر های
مدرنی مثل فایرفاکس یا نسخه های جدید نت اسکیپ قابل قیاس نیست.
نمودار میله ای عمودی با CSS تکنیکی که با استفاده از آن می توان عناصر نامرتبی از لیست را در
ارتفاع و عرض معینی و به شکل نمودار میله ای مرتب کرد: موقعیت یابی هر ۴ کوارتر با استفاده از
عنصر ul موقعیت: شیوه ای مطلق و پرکاربرد.
عنصر div هم برای ایجاد میله های افقی استفاده می شود.
برای اضافه کردن رنگ ها، باید از عناصر تصویر رنگی CSS استفاده کنیم.
طراحی نمودار و گراف با کدها و ابزارهای جذاب برای صفحات وب نمودار خط شکسته با CSS نمودار خط شکسته
ساده ترین راه نمایش و سازماندهی داده هاست.
اگر شما در استفاده از زبان برنامه نویسی برای ایجاد گراف خط شکسته راحت نیستید، این شیوه ایجاد نمودار خطی
با استفاده از CSS به شما سهولت در ارائه اطلاعات خود را اهدا می کند.
ترکیبی از روح CSS و موقعیت یابیست که گراف خطی را در صفحه شبیه سازی می کند.
این تکنیک از عنصر تعریف لیست (DL) استفاده می کند که نمایش دهنده دستگاه مختصات است.
طراحی نمودار و گراف با کدها و ابزارهای جذاب برای صفحات وب نمودار میله ای تجمعی با CSS مقالات بسیاری
در مورد ایجاد نمودار های میله ای نوشته شده اما در مورد طراحی گرافهای تجمعی (stacked) بحث و بررسی زیادی
صورت نگرفته است.
نمودار های میله ای انباشته معمولا در جاهایی کاربرد دارند که یکنواخت ترین سری داده ها در قسمت پایین درج
شده تا به دست آوردن یک بینش کلی در مورد داده ها برای کاربر آسان تر گردند.
HTML و CSS در ایجاد یک نمودار میله ای انباشته CSS دست به دست هم می دهند.
در این هنگام طراح از لیست تعریفی (DL) برای ارائه داده ها در شکل سازمان دهی شده بهره می برد.
تگ های

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

، و: به همراه CSS ، آماده طراحی خلاقانه خواهید بود.
طراحی نمودار و گراف با کدها و ابزارهای جذاب برای صفحات وب ۲- پلاگین های jQuery برای نمودارها و گرافها
«jQuery یک کتابخانه و آرشیو از کدهای جاوا اسکریپت با قابلیت سازگاری با مرورگرهای مختلف است که به منظور برای
ساده تر کردن برنامه نویسی از سوی کلاینت (client-side scripting) HTML طراحی شده.» (تعریف ویکیپدیا).
پلاگین های jQuery ابزارهایی برای گسترش قابلیت های برنامه های کاربردی محسوب می گردند.
این ها پلاگین های با نصب بسیار آسان هستند که سبب کاهش کار طراحی در زمینه برنامه نویسی می گردند.
در ادامه به آشنایی مختصر با ۳ پلاگین jQuery محبوب و پرکاربرد برای نمودارها و گراف ها می پردازیم.(توضیحات بیشتر
را با کلیک روی لینک هر مطلب می توانید خودتان مطالعه کنید). مزایای استفاده از jQuery را می توان در
مواردی همچون طراحی سبک و عدم نیاز به پهنای باند برای بارگذاری صفحات ، طراحی آسان و سریع ، نوشتن
خطوط کمتر اما بدست اوردن توانمندی های بیشتر، سازگاری با مرورگر های مختلف، یکپارچگی آسان و مفید با برنامه های
کاربردی و چند مورد مفید دیگر برشمرد.
Flot Flot یک آرشیو خالص ترسیم نموداری جاوا اسکریپت برای jQuery است که به طراح کمک می کند به ترسیم
نمودار هایی با ظاهر زیبا و از نوع کلاینت ایجاد کند.
از ویژگی های آن می توان به سادگی در رابط کاربری، ویژگی هایی مانند زوم و ردیابی ماوس اشاره کرد
، اما محدودیت در ترسیم نمودارها از نقاط ضعف آن است.
طراحی نمودار و گراف با کدها و ابزارهای جذاب برای صفحات وب ویژگی ها : – ایجاد نمودارها و ترسیمات
گرافیکی – بهره مندی از ویژگی های خاص : زوم و ردگیری نشانگر ماوس – امکان استفاده ساده و آسان
– پشتیبانی از: اینترنت اکسپلورر نسخه های ۶،۷،۸ با تگ بوم HTML (راهنمای شبیه ساز جاوا اسکریپت excanvas برای اینترنت
اکسپلورر استفاده می شود) ، فایرفاکس .
x2 به بعد، سافاری.
x3 به بعد ، اپرا ۹٫۵ به بالا و کانکرر.
x4 به بالا.
jQuery Sparklines Sparklines نیز یک ابزار ترسیم نمودارهاست که بیشتر در مورد آمار و داده های آماری کاربرد دارد.
این ابزار معمولا برای نمایش تصویری آمار و ارقام فعالیت های بازار سهام، درجه حرارت و یا اندازه گیری ها
استفاده می شود.
آقای ادوارد توفت sparklines را به این شکل توصیف می کند: « کار با داده های فراوان، طراحی ساده ،
و گرافیک با حجم کلمات».
این شرح کارهائیست که شما در صفحه وب خود نیاز به انجام دادنش دارید : ۱ کتابخانه جاوا اسکریپتی jQuery
که باید در صفحه باگذاری گردد- حداقل نسخه ۱٫۲ و یا بالاتر ۲- یک کپی از jquery.sparkline.js بارگذاری شده در
صفحه که می توانید ان را از این سایت دانلود کنید، ۳- تگ داخلی بر روی صفحه که در آن
عبارت sparkline (به عنوان مثال) نمایش داده شود و ۴-فراخوانی تابع sparkline() برای نمایش sparkline در عمل.
ویژگی های اسپارک لاین شامل ترسیم انواع نمودار های خطی، میله ای ، بار و سه حالته (tristate) ، نمودار
گسسته ، گراف گلوله ای ، گراف دایره ای، و پلات های جعبه ایست.
این پلاگین توسط گَرِت واتز (Gareth Watts) نوشته شده است.
همچنین نکته جالب دیگری که متوجه شدم این است که Sparklines را همچنین می توان مایکروسافت اکسل ۲۰۱۰ برای نشان
دادن روند تمایل داده ها (data trends) مورد استفاده قرار داد.
طراحی نمودار و گراف با کدها و ابزارهای جذاب برای صفحات وب ویژگی ها : – ایجاد نمودار های درون
خطی کوچک – امکان سفارشی سازی اندازه ها و رنگ های نمودار – بهره مندی از تعداد فراوان سبک ها:
نمودارهای های درون خطی، نمودار میله ای ، Tristate ، نمودار گسسته ، گراف جعبه ای ، نمودار دایره ای
و نمودار گلوله ای.
– برخورداری از توابع اضافی: سرعت ماوس ، مقادیر منفی ، آستانه (threshold) – پشتیبانی از : فایرفاکس ۲ به
بالا، سافاری ۳ به بالا ، اپرا ۹ ، گوگل کروم و اینترنت اکسپلورر ۶ ، ۷ و ۸ jqPlot
jqPlot نیز یکی از الحاقات jQuery برای رندر کردن کامل نمودار های جاوا اسکریپت طراحی شده توسط کلاینت در صفحات
وب شما می باشد.
این اکستنشن یکی از افزونه های بسیار قابل استفاده و پرکاربرد برای گرافها و نمودارهاست آن هم به دلیل ویژگی
های جامعی که ارائه می دهد.
طراحی نمودار و گراف با کدها و ابزارهای جذاب برای صفحات وب ویژگی ها : – برخورداری از گزینه های
متعدد سبک دهی به نمودارها و گرافها.
– محور تاریخ با قالب بندی قابل تنظیم.
– طراحی حداکثر ۹ محور Y.
– محور چرخش متن.
– محاسبه خودکار گرایشات خطوط در نمودارها.
– امکان افزودن نکات حاشیه نویسی (Tooltips و برجسته سازی و هایلایت نقاط.
– پیش فرض های مناسب برای سهولت استفاده.
– پشتیبانی از : اینترنت اکسپلورر ۶ ، ۷ و ۸ ، فایرفاکس ، سافاری و اپرا ۳- نمودارها و
گراف های مبتنی بر فلش فلش (Flash) ابزاری است که در ایجاد برنامه های کاربردی تعاملی و انیمیشن در وب
سایت ها به طراح وب کمک می کند.
انیمیشن ها و تصاویر متحرک سرگرم کننده هستند و قطعا تاثیر بیشتری روی مخاطبان گذارده و در انتقال پیام مدیر
سایت به مخاطبان و بازدیدکنندگان نقش مهمی را ایفا می کنند.
Fusion Chart Free فیوژن چارت یک ابزار رایگان مبتنی بر فلش است که به طراح وب امکان ایجاد نمودارهای تعاملی
و متحرک مبتنی بر فلش برای برنامه های کاربردی تحت وب، نرم افزار های دسکتاپ و فایل های پاورپوینت (presentations)
او را می دهد.
طراحی نمودار و گراف با کدها و ابزارهای جذاب برای صفحات وب ویژگی ها : – برخورداری از بسیاری از
نیازهای اساسی طراح در هنگام خلق نمودار – ارائه ۲۲ نمونه از محبوب ترین سبک های نمودارها مانند ستونی ،
خطی ، دایره ای، میله ای ، مساحتی، انباشته، شمعدانی و نمودار قیفی ، که در تمام مرورگرها وب به
یک شکل به نمایش در می اید.
– نمودارها و جداول تعاملی و پویا نما که به ظاهر برنامه های طراحی شده شما جلوه ای حرفه ای
می بخشد.
– سازگاری با پی اچ پی، ASP.NET ، JSP ، ColdFusion ، پایتون، RoR ، صفحات HTML ساده و حتی
فایل های پاورپوینت.
– همه نمودار ها می توانند اطلاعات مورد نیاز را از هر پایگاه داده استخراج کرده و از قابلیت AJAX
برخوردار هستند.
amCharts AmCharts در واقع محدوده بزرگ و قابل سفارشی سازی از مجموعه نمودارها را به طراح وب ارائه می دهد.
استفاده دینامیک از این محصول مبتنی بر وب قطعا سبب تبدیل اطلاعات خام شما به نمودارهایی بزرگ و عالی می
گردد.
طراحی نمودار و گراف با کدها و ابزارهای جذاب برای صفحات وب ویژگی ها : – سبک های نموداری مختلف:
دایره ای توپر و توخالی، خطی و سطحی، ستونی و میله ای و پراکنده و حبابی! – قابلیت ترسیم نمودار
ها و جداول به صورت دو بعدی یا سه بعدی.
– قابلیت استخراج داده ها از فایل های CSV و یا XML.
– توانایی خواندن اطلاعات نوشته شده با پی اچ پی ، دات نت ، جاوا ، Ruby on Rails ،
پرل ، ColdFusion ، و بسیاری زبان های برنامه نویسی دیگر.
AnyChart AnyChart به کاربران خود یک مولفه ترسیم نموداری پویا و مبتنی بر فلش ارائه می دهد.
این برنامه یک محصول XML است که سازگار با هر نوع فرمت و قالب بندی داده هاست.
هر چند این ابزار رایگان نیست، اما در عوض به همه علاقه مندان به طراحی یک نسخه آزمایشی برای کاربرانی
که دفعه اولشان است از برنامه استفاده می کنند ارائه می کند، اما اگر می خواهید توانمندی های بالقوه این
ابزار را به حداکثر برسانید، ۶۴۹ دلار همه پولیست که برای خرید یک لایسنس ان نیاز دارید.
طراحی نمودار و گراف با کدها و ابزارهای جذاب برای صفحات وب ویژگی ها : – سازگاری با انواع سیستم
عامل ها و انواع مرورگرهای وب.
– توانایی ترسیم نمودار های دایره ای، میله ای ، خطی ، شمعدان مانند، سطحی، ستونی ، حبابی، منحنی، نقطه
/ مارکر ، پراکنده ، جداول شمعدان مانند و حلقه ای.
– سازگاری کامل با ASP.NET ، ASP ، PHP ، JSP ، ColdFusion ، Ruby on Rails ، صفحات HTML
ساده و همچنین فایل های پاورپوینت .
XML/SWF Charts برنامه XML/SWF Charts یک ابزار انعطاف پذیر و پویا در تولید نمودارها و جداول گرافیکی است که بهترین
کیفیت گرافیکی ممکن را به عنوان نتیجه نهایی پیش روی طراح می گذارد.
طراحی نمودار و گراف با کدها و ابزارهای جذاب برای صفحات وب ویژگی ها : – قابلیت طراحی و خلق
سریع نمودارها و گرافها از داده های استاتیک و یا پویا (با هر زبان برنامه نویسی صفحات وب) – قابلیت
به روز رسانی کامل و جریان داده ها بدون نیاز به بارگذاری مجدد صفحه وب.
– پیمایش تعاملی (هر تعداد از دادهها و اطلاعات )، امکان زوم برای دریافت اطلاعات تکمیلی، چرخش سه بعدی نمودار،
توانایی قرار دادن پیوند ها، راهنمایی ها ، برچسب ها ، و غیره – انتقال بین تصاویر (transitions) با جلوه
پویا و انیمیشن و افکت های فلش با کیفیت گرافیکی بالا ، از جمله توانایی اعمال افکت های آنتی الایز
، شفاف سازی (ترنسپرنت) ، سایه دار ، برجسته ، تلالو دار ، و بلور کردن فونت ها.
– حالت تمام صفحه ، نمودار های مقیاس پذیر ، قابلیت چاپ نمودارها ، و خروجی گرفتن از انها به
فرمت بیت مپ.
– قابل استفاده در برنامه های کاربردی فلش ، برنامه های کاربردی وب و با پشتیبانی از ارتباطات جاوا اسکریپتی.
– پشتیبانی از متن یونیکد برای نمایش کاراکترهای خاص و زبان های مختلف.
– برخورداری از طیف متنوعی از انواع نمودارها.
۴-ابزارهای انلاین طراحی نمودارها و جداول آیا از کد نویسی مداوم و طولانی خسته شده اید و فقط می خواهید
به خلق نمودار ها و جداول دلخواه خود به روشی ساده و به دور از برنامه نویسی بپردازید و در
صفحات وب از آنها استفاده کنید؟ در ادامه مقاله به معرفی برخی از ابزارهای کاربردی و آنلاین طراحی نمودار ها
و جداول می پردازیم: 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
می توان منتظر یک نمودار اماده برای ارائه در سایت یا استفاده در موارد دیگر بود! طراحی نمودار و گراف
با کدها و ابزارهای جذاب برای صفحات وب سخن پایانی تجزیه و تحلیل آماری هیچ گاه سرگرمی خوبی برای گذران
اوقات فراغت نبوده! اما با کمک ابزارهای موجود و کد نویسی برای هر چه بهتر کردن ارائه های خود راه
ساده تری پیش رو خواهید داشت.
فقط با یک کد و یا با چند کلیک کافیست که پرزنتیشن شما و چگونگی خلق ماهرانه نمودارها اصلی ترین
بحث در جلسات شما با دوستان و حضار باشد.
از هر تکنیک این مقاله که می خواهید استفاده کنید، همیشه سعی کنید قبلش دیگر روش های را هم آزمایش
کنید تا بهترین روش یا ابزار کار را که بیشتر با آن راحت هستید و بیشتر مناسب حالتان است را
بیابید.
منبع:مجله اینترنتی گویاآی‌تی