ساخت نمودار انیمیشنی با Chart.js
دارالترجمه رسمی
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 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>
<script>
var buyers = document.getElementById('buyers').getContext('2d');
new Chart(buyers).Line(buyerData);
</script>
در داخل تگ اسکریپتی که باز کردیم نیاز داریم که داده های خودمون رو وارد کنیم، در این مثال یک شی داریم که 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]
}
]
}
نتیجه گیری
میتونین یک دمو از عملیاتی که انجام دادیم در اینجا ببینین، اما اگر ترجیح میدین یک کپی/پیست ساده داشته باشین قطعه کدی که نوشتیم به صورت زیر هست :
<!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 فعالیتش رو شروع کرد، در حال حاضر در زمینه ی برنامه نویسی تحت وب و اندروید و شبکه های ارتباطی سیسکو فعالیت میکنه .
نظرات و سوالات کاربران
میشه با این ماژول نمودار با محور تاریخ شمسی رو هم کشید؟ چجوری؟
من همین مراحل رو میرم ولی هیچی ظاهر نمیشه
یعنی اون فضا رو میگیره ولی نموداری نشون نمیده
codepen.io/ranstyr/pen/yepved
خواهش میکنم، برای این کار باید یک اسکریپت ساده ی جاوا اسکریپت یا جی کوئری بنویسید، برای مثال یک متغیر به اسم percent تعریف کنید و سپس value مورد نظر رو بهش اختصاص بدید.
مرسی از توضیحات خوبتون..من میخواستم برای نمودار دایره ای مقدار درصد آرا هم بدون اینکه موس رو حرکت بدیم و ببریم رو دایره نشون داده بشه..ممنون میشم راهنمایی کنید
خیلی ممنون خیلی خوب توضیح دادید متوجه شدم
بله درواقع از نظر فنی context یک کلاس انتزاعی هست که اطلاعات محیطی رو ارائه میکنه که ما برای دسترسی به resource ها و برخی موارد دیگه ازش استفاده میکنیم مثلا فرض کن که در یک شهر غریب گم شدی و یک راهنما کنارت داری که هروقت گیج شدی بهت میگه کجا هستی و چیجوری به قسمت های مختلف شهر بری، ما هم با مراجعه به context به منابعی که نیاز داریم دسترسی پیدا میکنیم.
در واقع ما از context که همون متصدی هست میخوایم یه اکتیویتی که همون ناهار هست رو اجرا کنه درسته ؟