ساخت نمودار انیمیشنی با Chart.js

ساخت نمودار انیمیشنی با Chart.js
نمودارها ابزار بسیار بهتری برای نمایش داده ها نسبت به جدول ها هستند و مزایای زیادی دارن، نگاه کردن به داده های تصویری خیلی راحت تر هست نسبت به خوندن جدول ها اما خب گاهی اوقات ساخت این نمودارها کار ساده ای نیست ! در این مقاله نحوه ی رسم نمودارهای زیبا رو به شما آموزش خواهیم داد.
 
دارالترجمه رسمی
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
جای بروشور دیواری
خرید جای بروشور دیواری و رومیزی
افزونه های سئو وردپرس
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
تعمیر لوازم خانگی
تعمیر جاروبرقی، مایکروفر، بخارشوی، ظرفشویی، لباسشویی، سولاردام، کولرگازی
خودتان را اینجا معرفی کنید

یکی از راه های فوق العاده برای کشیدن نمودار استفاده از Chart.js هست، یک پلاگین جاوا اسکریپت که از Canvas در  HTML5 برای کشیدن گراف در صفحه استفاده میکنه. این یک پلاگین داکیومنت شده و کامل هست که از انواع نمودارهای میله ای، خطی، نمودار دایره ای و ... پشتیبانی میکنه.
برای اینکه ببینیم Chart.js چطور کار میکنه 3 نوع گراف میسازیم، اولی تعداد خریداران یک محصول ساختگی رو در طول 6 ماه به صورت یک نمودار خطی نشون میده، دومی نشون میده که مشتریان از چه کشور هایی آمده اند که یک نمودار دایره ای هست و درنهایت از یک نمودار میله ای که مقدار سوددهی رو در یک بازه زمانی مشخص نشون بده .

راه اندازی

اولین کاری که باید انجام بدیم دانلود Chart.js هست، فایل Chart.min.js رو از دایرکتوری غیرفشرده دانلود کنین و در دایرکتوری که ای میخواین باهاش کار کنین قرار بدین، در نهایت یک فایل HTML جدید در دایرکتوری خود قرار بدین و اسکریپت مورد نظر رو فراخوانی کنین :
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Chart.js demo</title>
        <script src='Chart.min.js'></script>
    </head>
    <body>
    </body>
</html>

رسم یک نمودار خطی

برای کشیدن یک نمودار خطی اولین چیزی که نیاز داریم یک المنت Canvas در فایل HTML خودمون هست که Chart.js با استفاده از اون بتونه نمودار مارو بکشه، بنابراین این خط رو به Body فایل HTML خودتون اضافه کنین :
<canvas id="buyers" width="600" height="400"></canvas>
در قسمت بعد نیاز به اسکریپتی داریم که Context مورد نظرمون رو از Canvas به ما بده، بنابراین این خط رو به پایین قسمت Body خودتون اضافه کنین :
<script>
    var buyers = document.getElementById('buyers').getContext('2d');
    new Chart(buyers).Line(buyerData);
</script>
البته ما میتونیم تنظیماتی رو به نمودارمون با استفاده از متدهای Line که در داکیومنت مورد نظر وجود داره بدیم، اما فعلا کارمون رو ساده درنظر میگریم.
در داخل تگ اسکریپتی که باز کردیم نیاز داریم که داده های خودمون رو وارد کنیم، در این مثال یک شی داریم که Label هایی داره به منظور مبنای نمودارمون و داده هایی داریم برای نشان دادن مقدارهای نمودار، این قطعه کد رو بالای خطی که با var buyers شروع میشه وارد کنین
var buyerData = {
	labels : ["January","February","March","April","May","June"],
	datasets : [
		{
			fillColor : "rgba(172,194,132,0.4)",
			strokeColor : "#ACC26D",
			pointColor : "#fff",
			pointStrokeColor : "#9DB86D",
			data : [203,156,99,251,305,247]
		}
	]
}
حالا اگر فایل مورد نظرتون رو داخل مرورگر تست کنید باید یک نمودار خطی ببینین.

رسم یک نمودار دایره ای

نمودار خطی خودمون رو کشیدیم حالا نوبت نمودار دایره ای هست، اولین کار ما ساختن المنت Canvas هستش و بعد از اون context مورد نظر رو در قسمت مخصوص به جاوااسکریپت وارد میکنیم :
 
<canvas id="countries" width="600" height="400"></canvas
var countries= document.getElementById("countries").getContext("2d");
new Chart(countries).Pie(pieData, pieOptions);

سپس باید داده های خودمون رو بسازیم، این داده ها نسبت به داده های نمودار خطی کمی متفاوت تر و ساده تر هستند، فقط کافی هست یک مقدار و یک رنگ به قسمت های مورد نظرمون بدیم :
var pieData = [
	{
		value: 20,
		color:"#878BB6"
	},
	{
		value : 40,
		color : "#4ACAB4"
	},
	{
		value : 10,
		color : "#FF8153"
	},
	{
		value : 30,
		color : "#FFEA88"
	}
];
حالا دقیقا بعد از pieData باید تنظیماتی که میخواهیم رو وارد کنیم :
var pieOptions = {
	segmentShowStroke : false,
	animateScale : true
}
این تنظیمات شامل 2 چیز میشن، اول اینکه حاشیه رو از بخش هامون پاک میکنن و بعد اینکه انیمیشنی به نمودار اضافه میکنه که یهو از هیچی نمودار به وجود میاد

رسم نمودار میله ای

درنهایت، بیایین یک نمودار میله ای به صفحه مون اضافه کنیم، خوشبختانه دستورات مربوط به نمودار میله ای خیلی شبیه به نمودار خطی هست که تازه رسم کردیم، اول از همه باید Canvas رو اضافه کنیم :
<canvas id="income" width="600" height="400"></canvas>
سپس Context مون رو دریافت میکنیم :
var income = document.getElementById("income").getContext("2d");
new Chart(income).Bar(barData);
و در نهایت داده هامون رو در نمودار میله ای وارد میکنیم :
var barData = {
	labels : ["January","February","March","April","May","June"],
	datasets : [
		{
			fillColor : "#48A497",
			strokeColor : "#48A4D1",
			data : [456,479,324,569,702,600]
		},
		{
			fillColor : "rgba(73,188,170,0.4)",
			strokeColor : "rgba(72,174,209,0.4)",
			data : [364,504,605,400,345,320]
		}

	]
}
همونطور که میبینین به نسبت شبیه به نمودارهای قبلی هست با این تفاوت که ایندفعه از rgba استفاده کردیم تا بتونیم به نمودارمون رنگ هایی بدیم که شفافیت داشته باشن .

نتیجه گیری

میتونین یک دمو از عملیاتی که انجام دادیم در اینجا ببینین، اما اگر ترجیح میدین یک کپی/پیست ساده داشته باشین قطعه کدی که نوشتیم به صورت زیر هست :
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Chart.js demo</title>
        <!-- import plugin script -->
        <script src='Chart.min.js'></script>
    </head>
    <body>
        <!-- line chart canvas element -->
        <canvas id="buyers" width="600" height="400"></canvas>
        <!-- pie chart canvas element -->
        <canvas id="countries" width="600" height="400"></canvas>
        <!-- bar chart canvas element -->
        <canvas id="income" width="600" height="400"></canvas>
        <script>
            // line chart data
            var buyerData = {
                labels : ["January","February","March","April","May","June"],
                datasets : [
                {
                    fillColor : "rgba(172,194,132,0.4)",
                    strokeColor : "#ACC26D",
                    pointColor : "#fff",
                    pointStrokeColor : "#9DB86D",
                    data : [203,156,99,251,305,247]
                }
            ]
            }
            // get line chart canvas
            var buyers = document.getElementById('buyers').getContext('2d');
            // draw line chart
            new Chart(buyers).Line(buyerData);
            // pie chart data
            var pieData = [
                {
                    value: 20,
                    color:"#878BB6"
                },
                {
                    value : 40,
                    color : "#4ACAB4"
                },
                {
                    value : 10,
                    color : "#FF8153"
                },
                {
                    value : 30,
                    color : "#FFEA88"
                }
            ];
            // pie chart options
            var pieOptions = {
                 segmentShowStroke : false,
                 animateScale : true
            }
            // get pie chart canvas
            var countries= document.getElementById("countries").getContext("2d");
            // draw pie chart
            new Chart(countries).Pie(pieData, pieOptions);
            // bar chart data
            var barData = {
                labels : ["January","February","March","April","May","June"],
                datasets : [
                    {
                        fillColor : "#48A497",
                        strokeColor : "#48A4D1",
                        data : [456,479,324,569,702,600]
                    },
                    {
                        fillColor : "rgba(73,188,170,0.4)",
                        strokeColor : "rgba(72,174,209,0.4)",
                        data : [364,504,605,400,345,320]
                    }
                ]
            }
            // get bar chart canvas
            var income = document.getElementById("income").getContext("2d");
            // draw bar chart
            new Chart(income).Bar(barData);
        </script>
    </body>
</html>

توضیح بیشتر

شاید برای شما سوال باشه که Context چیه، Context و Activity دو مفهوم مرتبط به هم هستن که خصوصا در اندروید نویسی استفاده میشن، با یک مثال ساده این دو مفهوم رو توضیح میدم، اگر چیزی متوجه نشدین نگران نباشین چون این مفاهیم به صورت کامل در مفاهیم مرتبط با Java وجود دارن و در صورت نیاز میتونین از منابع موجود مطالعه کنین :
فرض کنین که در هتلی اقامت دارین برای استفاده از امکانات هتل مثل صبحانه, ناهار یا خشکشویی هتل و ... با متصدی تماس می گیرین و سفارشتون رو اعلام می کنین و اون سفارش مورد نظر شما رو در اختیارتون می ذاره.
حالا اگر هتل  Application شما باشه و صبحانه و ناهار و ... معادل اجرای یک activity جدید, دسترسی به Database و ... باشه اون متصدی که باهاش تماس می گیرید تا منابعی که می خواین رو در اختیارتون بذاره همون Context هستش، در واقع Context باعث میشه به منابعی که نیاز دارین دسترسی پیدا کنین و این منابع خصوصن در برنامه نویسی جاوا برای اندروید بسیار مهم و قابل توجه هستن.

محمد یه دانشجوی فناوری اطلاعات هست که از سال 92 فعالیتش رو شروع کرد، در حال حاضر در زمینه ی برنامه نویسی تحت وب و اندروید و شبکه های ارتباطی سیسکو فعالیت میکنه .

نظرات و سوالات کاربران

ارسال پاسخ آناهیتا یحیی
آناهیتا یحیی
یکشنبه ۱۰ آذر ۱۳۹۸ ۱۴:۴۶
سلام مرسی بابت پست مفیدتون. یک سوال. من از این پارت دارم استفاده میکنم فقط میخوام که اعدادی که روی نمودار تولید میکنه فارسی شه.شما میدونید چجوری میشه اینکارو کرد؟
ارسال پاسخ محمدرضا کیانی
محمدرضا کیانی
پنج شنبه ۱۷ اسفند ۱۳۹۶ ۱۰:۵۶
سلام
میشه با این ماژول نمودار با محور تاریخ شمسی رو هم کشید؟ چجوری؟
ارسال پاسخ پویا
پویا
دوشنبه ۱۷ مهر ۱۳۹۶ ۱۸:۳۶
سلام
من همین مراحل رو میرم ولی هیچی ظاهر نمیشه
یعنی اون فضا رو میگیره ولی نموداری نشون نمیده
ارسال پاسخ مجید علوی‌زاده
مجید علوی‌زاده
دوشنبه ۱۴ تیر ۱۳۹۵ ۰۹:۳۱
در پاسخ به دیدگاه محمد ارسال شده در پنج شنبه ۱۰ تیر ۱۳۹۵ ۲۱:۴۱
سلام خدمت شما ممنون بابت آموزش خیلی خوب و کاربردیتون من طبق راهنما پیش رفتم مشکلی ندارم فقط وقتی از مقادیر منفی استفاده میشه شکل چارت تغییر نمیکنه و به این شکل میشه : http://img.majidonline.com/show/319164/chart.png
chartJS اعداد منفی رو هنوز درست پشتیبانی نمی‌کنه، اما میشه از یک سری ترفند استفاده کرد، اینو ببینید:
codepen.io/ranstyr/pen/yepved
ارسال پاسخ محمد
محمد
پنج شنبه ۱۰ تیر ۱۳۹۵ ۲۱:۴۱
سلام خدمت شما ممنون بابت آموزش خیلی خوب و کاربردیتون من طبق راهنما پیش رفتم مشکلی ندارم فقط وقتی از مقادیر منفی استفاده میشه شکل چارت تغییر نمیکنه و به این شکل میشه : img.majidonline.com/show/319164/chart.png
ارسال پاسخ محمد بابازاده
محمد بابازاده
چهارشنبه ۱۰ تیر ۱۳۹۴ ۱۸:۳۴
در پاسخ به دیدگاه maryam.alvan2 ارسال شده در شنبه ۰۶ تیر ۱۳۹۴ ۲۲:۰۰

مرسی از توضیحات خوبتون..من میخواستم برای نمودار دایره ای مقدار درصد آرا هم بدون اینکه موس رو حرکت بدیم و ببریم رو دایره نشون داده بشه..ممنون میشم راهنمایی کنید

خواهش میکنم، برای این کار باید یک اسکریپت ساده ی جاوا اسکریپت یا جی کوئری بنویسید، برای مثال یک متغیر به اسم percent تعریف کنید و سپس value مورد نظر رو بهش اختصاص بدید.

ارسال پاسخ maryam.alvan2
maryam.alvan2
شنبه ۰۶ تیر ۱۳۹۴ ۲۲:۰۰

مرسی از توضیحات خوبتون..من میخواستم برای نمودار دایره ای مقدار درصد آرا هم بدون اینکه موس رو حرکت بدیم و ببریم رو دایره نشون داده بشه..ممنون میشم راهنمایی کنید

ارسال پاسخ Amir Tejareh
Amir Tejareh
شنبه ۱۲ اردیبهشت ۱۳۹۴ ۰۱:۴۳
در پاسخ به دیدگاه محمد بابازاده ارسال شده در شنبه ۱۲ اردیبهشت ۱۳۹۴ ۰۰:۴۴

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

خیلی ممنون خیلی خوب توضیح دادید متوجه شدم

ارسال پاسخ محمد بابازاده
محمد بابازاده
شنبه ۱۲ اردیبهشت ۱۳۹۴ ۰۰:۴۴
در پاسخ به دیدگاه Amir Tejareh ارسال شده در جمعه ۱۱ اردیبهشت ۱۳۹۴ ۲۰:۱۹

در واقع ما از context که همون متصدی هست میخوایم یه اکتیویتی که همون ناهار هست رو اجرا کنه درسته ؟

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

ارسال پاسخ Amir Tejareh
Amir Tejareh
جمعه ۱۱ اردیبهشت ۱۳۹۴ ۲۰:۱۹

در واقع ما از context که همون متصدی هست میخوایم یه اکتیویتی که همون ناهار هست رو اجرا کنه درسته ؟