معرفی کتابخانه chartjs

۱۲ دی ۱۴۰۳ مصورسازی مصورسازی

 

Chart.js یکی از کتابخانه‌های محبوب و متن‌باز جاوااسکریپت برای مصورسازی داده‌ها است که به توسعه‌دهندگان این امکان را می‌دهد تا با کمترین پیچیدگی، نمودارهای زیبا و تعاملی ایجاد کنند. این کتابخانه در سال 2013 توسط **نیکلاس راسموسن** توسعه یافت و به دلیل سادگی، انعطاف‌پذیری و قابلیت‌های گسترده‌اش به سرعت جایگاه خود را در میان ابزارهای مصورسازی داده پیدا کرد.

 

Chart.js از فناوری HTML5 Canvas بهره می‌برد که به آن اجازه می‌دهد نمودارهایی با عملکرد بالا و طراحی مدرن ایجاد کند. این کتابخانه برای پروژه‌های کوچک و متوسط بسیار مناسب است و به کاربران امکان می‌دهد که داده‌های خود را به صورت بصری و جذاب نمایش دهند.

 

مقایسه با سایر کتابخانه‌ها
 

Chart.js در مقایسه با کتابخانه‌های دیگر مانند D3.js ،Observable Plot و ECharts، نقاط قوت و محدودیت‌های خاص خود را دارد:

 

D3.js: D3 یک کتابخانه قدرتمند و انعطاف‌پذیر برای مصورسازی داده‌ها است، اما منحنی یادگیری آن شیب‌دار است و برای ایجاد نمودارهای ساده نیاز به نوشتن کد بیشتری دارد. در مقابل، Chart.js با سادگی و رابط کاربری آسان، گزینه‌ای مناسب برای پروژه‌هایی است که به سرعت و بدون پیچیدگی نیاز به نمودار دارند.
 
Observable Plot: این کتابخانه برای کاربران پلتفرم Observable طراحی شده و امکان ایجاد نمودارهای ساده و قابل فهم را فراهم می‌کند. اما اگر به دنبال پشتیبانی گسترده از انواع نمودارها و سفارشی‌سازی بیشتر باشید، Chart.js انتخاب بهتری است.

 

ECharts: ECharts یک کتابخانه قدرتمند چینی است که قابلیت‌های گسترده‌ای مانند نمودارهای سه‌بعدی و انیمیشن‌های پیچیده ارائه می‌دهد. با این حال، Chart.js به دلیل سادگی و حجم کمتر، برای پروژه‌هایی که نیاز به پیچیدگی زیاد ندارند، مناسب‌تر است.

 

ویژگی‌ها
 

Chart.js ویژگی‌های متعددی دارد که آن را به یک انتخاب محبوب تبدیل کرده است:

  • سادگی و یادگیری آسان: رابط کاربری ساده و مستندات کامل، یادگیری این کتابخانه را برای مبتدیان آسان می‌کند.
  • متن‌باز و رایگان: بدون نیاز به پرداخت هزینه یا لایسنس، می‌توانید از آن در پروژه‌های شخصی و تجاری استفاده کنید.
  • پشتیبانی از انواع نمودارها: این کتابخانه مجموعه گسترده‌ای از نمودارها مانند خطی، ستونی، دایره‌ای و غیره را پشتیبانی می‌کند.
  • پشتیبانی از انیمیشن: نمودارهای ایجاد شده با Chart.js شامل انیمیشن‌های روان و جذاب هستند.
  • سفارشی‌سازی آسان: کاربران می‌توانند ظاهر نمودارها را به سادگی تغییر داده و سفارشی کنند.
  • پشتیبانی از واکنش‌گرایی: نمودارها به طور خودکار برای نمایش در دستگاه‌های مختلف مانند موبایل و دسکتاپ تنظیم می‌شوند.


انواع نمودارهایی که می‌توان با آن رسم کرد

 

Chart.js از طیف گسترده‌ای از نمودارها پشتیبانی می‌کند، از جمله:

  • نمودار خطی (Line Chart): مناسب برای نمایش روندها و تغییرات در طول زمان.
  • نمودار ستونی (Bar Chart): ایده‌آل برای مقایسه مقادیر مختلف.
  • نمودار دایره‌ای (Pie Chart): برای نمایش سهم نسبی هر بخش از کل.
  • نمودار دوناتی (Doughnut Chart):  مشابه نمودار دایره‌ای با امکان نمایش فضای خالی در مرکز.
  • نمودار پراکنده (Scatter Chart): مناسب برای نمایش ارتباط بین دو متغیر.
  • نمودار قطبی (Polar Area Chart): برای نمایش داده‌ها در یک ساختار دایره‌ای.

 

این تنوع به توسعه‌دهندگان امکان می‌دهد که با توجه به نیاز خود، نمودار مناسب را انتخاب کنند.

 

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

در اینجا یک نمونه کد ساده برای رسم یک نمودار خطی با استفاده از Chart.js آورده شده است:

 

<!DOCTYPE html>
<html>
<head>
<title>نمودار خطی با Chart.js</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h1>مثال نمودار خطی</h1>
<canvas id="myChart" width="400" height="200"></canvas>
 
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line', // نوع نمودار
data: {
labels: ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور'], // برچسب‌ها
datasets: [{
label: 'فروش ماهانه',
data: [12, 19, 3, 5, 2, 3], // داده‌ها
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 2,
fill: false // غیرفعال کردن پر کردن زیر نمودار
}]
},
options: {
responsive: true,
plugins: {
legend: {
display: true,
},
},
scales: {
x: {
title: {
display: true,
text: 'ماه‌ها',
}
},
y: {
title: {
display: true,
text: 'تعداد فروش',
}
}
}
}
});
</script>
</body>
</html>

 

این کد یک نمودار خطی ساده ایجاد می‌کند که فروش ماهانه را نمایش می‌دهد. با سفارشی‌سازی داده‌ها و گزینه‌ها، می‌توانید این نمودار را به دلخواه خود تغییر دهید.

 

نتیجه‌گیری
 

Chart.js یک کتابخانه عالی برای مصورسازی داده‌ها است که با سادگی، انعطاف‌پذیری و قابلیت‌های گسترده‌اش، به توسعه‌دهندگان امکان می‌دهد تا نمودارهای زیبا و تعاملی ایجاد کنند. اگر به دنبال ابزاری سبک و کاربرپسند برای مصورسازی داده‌های خود هستید، Chart.js گزینه‌ای ایده‌آل برای شما خواهد بود.