نمایش دادهها بهصورت بصری، درک اطلاعات پیچیده را بسیار سادهتر میکند. اگر در حال طراحی داشبورد مدیریتی، سامانه گزارشگیری، فروشگاه اینترنتی یا یک صفحه آماری هستید، نمودارها میتوانند اعداد خام را به اطلاعاتی قابل فهم تبدیل کنند. کتابخانه Chart.js یکی از محبوبترین ابزارهای جاوااسکریپت برای ساخت نمودارهای زیبا و تعاملی در صفحات وب است. این کتابخانه حجم مناسبی دارد، یادگیری آن ساده است و بدون نیاز به دانش تخصصی گرافیک میتوان با آن انواع نمودار را ایجاد کرد.
در این آموزش Chart.js از مفاهیم پایه شروع میکنیم و سپس به ساخت نمودار، تنظیم دادهها، شخصیسازی ظاهر، واکنشگرایی و بهروزرسانی اطلاعات میپردازیم. هدف این است که پس از مطالعه مقاله بتوانید یک نمودار واقعی را در پروژه خود پیادهسازی کنید و ساختار تنظیمات این کتابخانه را بهخوبی بشناسید.
Chart.js چیست و چه کاربردی دارد؟
Chart.js یک کتابخانه متنباز مبتنی بر جاوااسکریپت است که نمودارها را روی عنصر canvas مرورگر ترسیم میکند. این کتابخانه از نمودارهای خطی، میلهای، دایرهای، دوناتی، راداری، حبابی، پراکندگی و چند نوع نمودار دیگر پشتیبانی میکند. نمودارهای ساختهشده بهصورت پیشفرض دارای انیمیشن هستند و میتوانند در اندازههای مختلف صفحه نمایش بهدرستی نمایش داده شوند.
سادگی ساختار تنظیمات یکی از مهمترین مزایای Chart.js است. برای ایجاد یک نمودار معمولاً کافی است نوع نمودار، برچسبها، دادهها و چند گزینه ظاهری را مشخص کنید. برخلاف بعضی کتابخانههای پیچیده مصورسازی داده، برای شروع کار با Chart.js نیازی به یادگیری مفاهیم سنگین ندارید.
کاربردهای رایج Chart.js
- نمایش میزان فروش روزانه، ماهانه یا سالانه در داشبوردها
- مقایسه عملکرد محصولات، کارکنان یا شعب مختلف
- نمایش تغییرات قیمت، تعداد کاربران یا بازدید سایت در طول زمان
- ساخت گزارشهای مالی و آماری تعاملی
- نمایش سهم هر دسته از یک مجموعه با نمودار دایرهای یا دوناتی
- تحلیل نتایج نظرسنجی و دادههای پژوهشی
روش نصب و اضافه کردن Chart.js به پروژه
برای استفاده از این کتابخانه چند روش وجود دارد. سادهترین روش برای پروژههای کوچک یا تمرینی، دریافت Chart.js از شبکه توزیع محتوا یا CDN است. در این حالت باید آدرس فایل کتابخانه را با یک تگ script در صفحه قرار دهید. آدرس رایج نسخه توزیعشده کتابخانه برابر با https://cdn.jsdelivr.net/npm/chart.js است. بهتر است این فایل پیش از اسکریپتی قرار گیرد که نمودار را ایجاد میکند.
در پروژههایی که از ابزارهایی مانند Vite، Webpack، React یا Vue استفاده میکنند، نصب از طریق npm انتخاب مناسبتری است. فرمان npm install chart.js کتابخانه را به وابستگیهای پروژه اضافه میکند. پس از نصب میتوان اجزای مورد نیاز را import کرد. در نسخههای جدید، برای راهاندازی سریع میتوانید از مسیر chart.js/auto استفاده کنید تا کنترلرها و مؤلفههای ضروری بهصورت خودکار ثبت شوند.
ایجاد عنصر canvas
Chart.js نمودار را داخل یک عنصر canvas ترسیم میکند. بنابراین باید در بخش مورد نظر صفحه یک canvas با شناسه مشخص قرار دهید. برای مثال میتوانید عنصری با شناسه salesChart بسازید. بهتر است canvas درون یک ظرف یا container قرار گیرد تا کنترل عرض، ارتفاع و واکنشگرایی نمودار آسانتر باشد.
پس از آماده شدن canvas، در جاوااسکریپت آن را با دستور const ctx = document.getElementById('salesChart') انتخاب کنید. این متغیر بهعنوان ورودی سازنده Chart مورد استفاده قرار میگیرد. اگر اسکریپت پیش از ساخته شدن عناصر صفحه اجرا شود، مقدار ctx برابر null خواهد بود؛ بنابراین اسکریپت را در انتهای صفحه قرار دهید یا اجرای آن را به رویداد DOMContentLoaded وابسته کنید.
ساخت اولین نمودار میلهای
فرض کنید قصد داریم فروش شش ماه نخست سال را نمایش دهیم. برای ساخت نمودار باید یک نمونه جدید از کلاس Chart ایجاد کنیم. ساختار اصلی آن به شکل new Chart(ctx, config) است. شیء config سه بخش مهم type، data و options دارد. مقدار type نوع نمودار را مشخص میکند، data شامل برچسبها و مجموعه دادهها است و options رفتار و ظاهر نمودار را کنترل میکند.
برای این مثال مقدار type را برابر 'bar' قرار دهید. در بخش data، ویژگی labels را با آرایهای مانند ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور'] مقداردهی کنید. سپس در ویژگی datasets یک آرایه بسازید و داخل آن شیئی با label برابر 'فروش' و data برابر [120, 190, 150, 220, 260, 240] قرار دهید. با اجرای این تنظیمات، برای هر ماه یک ستون متناسب با مقدار فروش نمایش داده میشود.
هر عضو datasets نماینده یک مجموعه داده مستقل است. اگر بخواهید فروش دو سال را مقایسه کنید، میتوانید دو شیء در این آرایه قرار دهید. هر مجموعه باید label، data و ترجیحاً رنگ مخصوص خود را داشته باشد. تعداد مقادیر data بهتر است با تعداد اعضای labels برابر باشد؛ در غیر این صورت ممکن است نمودار ناقص یا گمراهکننده نمایش داده شود.
تنظیم رنگ ستونها
برای تعیین رنگ پسزمینه ستونها از ویژگی backgroundColor و برای رنگ حاشیه از borderColor استفاده میشود. مقدار backgroundColor میتواند یک رنگ ثابت مانند rgba(54, 162, 235, 0.6) یا آرایهای از رنگها باشد. اگر برای هر ستون رنگ متفاوتی نیاز دارید، آرایهای هماندازه دادهها تعریف کنید. ویژگی borderWidth نیز ضخامت حاشیه را کنترل میکند.
انتخاب رنگ فقط یک موضوع زیباییشناختی نیست. رنگها باید کنتراست کافی داشته باشند و باعث اشتباه کاربر نشوند. برای نمونه، رنگ سبز معمولاً برای رشد یا وضعیت مثبت و رنگ قرمز برای کاهش یا هشدار استفاده میشود. در نمودارهایی با چند مجموعه داده، رنگها باید بهاندازه کافی متمایز باشند.
آشنایی با بخش data در Chart.js
بخش data قلب نمودار است و معمولاً شامل labels و datasets میشود. labels نام دستهها یا نقاط محور افقی را تعیین میکند. datasets نیز اطلاعات عددی و تنظیمات هر سری داده را نگه میدارد. امکان استفاده از ساختارهای پیچیدهتر مانند دادههای دارای مختصات x و y نیز وجود دارد، اما آرایههای ساده برای بسیاری از نمودارهای مدیریتی کافی هستند.
ویژگیهای مهم datasets
- label نام مجموعه داده را در راهنما و Tooltip مشخص میکند.
- data مقادیر عددی یا نقاط نمودار را در خود نگه میدارد.
- backgroundColor رنگ زمینه ستونها، ناحیهها یا قطعات نمودار را تعیین میکند.
- borderColor برای انتخاب رنگ خط یا حاشیه استفاده میشود.
- borderWidth ضخامت خط یا حاشیه را تغییر میدهد.
- fill در نمودار خطی مشخص میکند فضای زیر خط پر شود یا خیر.
- tension میزان انحنای خطوط را کنترل میکند.
- pointRadius اندازه نقاط روی نمودار خطی را تعیین میکند.
ساخت نمودار خطی
نمودار خطی برای نمایش روند تغییرات در طول زمان مناسب است. برای تبدیل مثال قبلی به نمودار خطی کافی است مقدار type را از 'bar' به 'line' تغییر دهید. دادهها و برچسبها میتوانند بدون تغییر باقی بمانند. اگر مقدار tension را روی عددی مانند 0.3 قرار دهید، خطها کمی منحنی و نرمتر میشوند. مقدار صفر باعث ایجاد خطوط مستقیم بین نقاط خواهد شد.
برای جلوگیری از برداشت نادرست، محور زمان باید ترتیب منطقی داشته باشد. ماهها، روزها یا ساعتها را بهترتیب در labels قرار دهید. همچنین اگر اختلاف مقادیر بسیار کم است، بررسی کنید که شروع محور عمودی از عددی غیر از صفر باعث اغراق در تغییرات نشود. در گزارشهای رسمی، نمایش دقیق مقیاس اهمیت زیادی دارد.
ساخت نمودار دایرهای و دوناتی
نمودار دایرهای برای نمایش سهم اجزای مختلف از یک کل استفاده میشود. برای ساخت آن مقدار type را برابر 'pie' قرار دهید. فرض کنید میخواهید سهم فروش دستههای لپتاپ، موبایل و لوازم جانبی را نمایش دهید. labels شامل نام این سه دسته و data شامل مقادیری مانند [45, 35, 20] خواهد بود. برای هر بخش نیز باید یک رنگ مستقل تعریف شود.
اگر نوع نمودار را به 'doughnut' تغییر دهید، مرکز نمودار خالی میشود. نمودار دوناتی در داشبوردهای مدرن کاربرد زیادی دارد و فضای مرکزی آن از نظر بصری برای نمایش یک عدد کلی مناسب است. البته نمایش متن در مرکز بهصورت پیشفرض بخشی از تنظیمات ساده کتابخانه نیست و برای آن میتوان از افزونه یا پلاگین سفارشی استفاده کرد.
نمودارهای دایرهای را برای تعداد زیادی دسته به کار نبرید. وقتی تعداد قطعات زیاد یا اختلاف آنها بسیار کم باشد، مقایسه دشوار میشود. در چنین شرایطی نمودار میلهای افقی معمولاً اطلاعات را واضحتر منتقل میکند.
تنظیمات مهم در بخش options
بخش options امکان کنترل ابعاد، انیمیشن، محورها، عنوانها، راهنما، Tooltip و تعامل کاربر را فراهم میکند. یکی از پرکاربردترین تنظیمات responsive است. با قرار دادن responsive روی true، نمودار با تغییر اندازه ظرف والد هماهنگ میشود. این گزینه بهصورت پیشفرض فعال است، اما طراحی صحیح container همچنان ضروری خواهد بود.
ویژگی maintainAspectRatio نسبت ابعاد اولیه را حفظ میکند. اگر میخواهید ارتفاع نمودار را با CSS و مستقل از نسبت پیشفرض کنترل کنید، آن را روی false قرار دهید. سپس برای ظرف والد ارتفاع مشخصی مانند 400 پیکسل تعریف کنید. تعیین مستقیم ارتفاع canvas همیشه نتیجه مطلوبی ندارد؛ مدیریت اندازه از طریق ظرف والد معمولاً قابل اعتمادتر است.
تنظیم عنوان و راهنمای نمودار
در نسخههای جدید Chart.js، عنوان و راهنما در بخش plugins تنظیم میشوند. برای نمایش عنوان، options.plugins.title.display را روی true و مقدار text را روی عنوان مورد نظر قرار دهید. برای کنترل راهنما یا Legend از options.plugins.legend استفاده کنید. ویژگی position میتواند مقادیری مانند top، bottom، left یا right داشته باشد.
اگر فقط یک مجموعه داده دارید و عنوان نمودار مفهوم آن را کاملاً توضیح میدهد، گاهی حذف راهنما باعث خلوتتر شدن صفحه میشود. برای این کار display را در تنظیمات legend روی false قرار دهید. با این حال در نمودارهای چندمجموعهای بهتر است راهنما حفظ شود تا تشخیص رنگها امکانپذیر باشد.
تنظیم محورها
تنظیمات محورهای نمودارهای خطی و میلهای در options.scales قرار میگیرد. محور افقی معمولاً x و محور عمودی y نام دارد. برای شروع محور عمودی از صفر میتوانید مقدار options.scales.y.beginAtZero را برابر true قرار دهید. این تنظیم برای نمودارهای میلهای اهمیت ویژهای دارد؛ زیرا شروع محور از عددی بالاتر ممکن است تفاوت ستونها را بیشتر از واقعیت نشان دهد.
برای افزودن عنوان محور میتوان از scales.x.title و scales.y.title استفاده کرد. ویژگی display باید true و text باید برابر متن عنوان باشد. همچنین callbacks مربوط به ticks اجازه میدهند قالب برچسبهای محور را تغییر دهید. برای مثال میتوان اعداد فروش را با جداکننده هزارگان یا پسوند «تومان» نمایش داد.
شخصیسازی Tooltip و قالب اعداد
Tooltip همان کادر کوچکی است که با قرار گرفتن نشانگر روی یک نقطه یا ستون ظاهر میشود. تنظیمات آن در options.plugins.tooltip قرار دارد. با استفاده از callbacks میتوان متن نمایشدادهشده را تغییر داد. این قابلیت برای افزودن واحد پول، درصد، تعداد کاربر یا توضیح کوتاه بسیار مفید است.
برای قالببندی خوانای اعداد از Intl.NumberFormat استفاده کنید. برای نمونه، ساخت یک قالبدهنده با زبان fa-IR میتواند عدد 1250000 را با جداکنندههای مناسب نمایش دهد. سپس در callback مربوط به label، مقدار خام داده را دریافت کنید، آن را قالببندی کنید و واحد مورد نظر را به انتهای متن بیفزایید. این روش بهتر از تغییر خود دادهها به رشته است؛ زیرا Chart.js برای محاسبه مقیاس به مقدار عددی نیاز دارد.
بهروزرسانی پویا و حذف نمودار
در بسیاری از پروژهها دادهها از API دریافت میشوند یا با انتخاب فیلتر تغییر میکنند. لازم نیست پس از هر تغییر، نمودار را از ابتدا ایجاد کنید. نمونه Chart ساختهشده را در یک متغیر نگه دارید؛ برای مثال const salesChart = new Chart(ctx, config). سپس آرایه labels یا data را تغییر دهید و متد salesChart.update() را اجرا کنید.
برای افزودن یک ماه جدید، نام ماه را با push به labels و مقدار فروش را با push به data مجموعه مربوط اضافه کنید. پس از اجرای update، نمودار همراه با انیمیشن بهروزرسانی میشود. برای حذف آخرین داده نیز میتوان از pop استفاده کرد. اگر نمودار باید بهطور کامل از صفحه حذف یا دوباره ساخته شود، متد destroy() را فراخوانی کنید.
فراخوانی destroy در برنامههای تکصفحهای و فریمورکهایی مانند React اهمیت دارد. اگر روی یک canvas چند نمونه نمودار بدون حذف نمونه قبلی ایجاد شود، احتمال بروز خطا، مصرف اضافی حافظه یا تداخل رویدادها وجود دارد.
دریافت داده از API؛ یک سناریوی عملی
فرض کنید یک API، فهرست فروش ماهانه را بهشکل آرایهای از اشیای دارای month و amount برمیگرداند. ابتدا با fetch درخواست را ارسال کنید و پاسخ را به JSON تبدیل کنید. سپس با متد map یک آرایه از نام ماهها و آرایه دیگری از مبالغ بسازید. آرایه نخست به labels و آرایه دوم به dataset.data اختصاص داده میشود.
بهتر است پیش از نمایش نمودار، وضعیت بارگذاری و خطا را مدیریت کنید. تا زمان دریافت پاسخ میتوانید یک پیام بارگذاری نمایش دهید. اگر درخواست ناموفق بود، پیام قابل فهمی به کاربر نشان دهید و از ساخت نمودار با داده نامعتبر جلوگیری کنید. همچنین مطمئن شوید مقادیر مبلغ واقعاً عدد هستند؛ بعضی APIها اعداد را بهصورت رشته برمیگردانند و باید آنها را با Number تبدیل کرد.
نکات مهم برای نمودارهای فارسی و راستچین
متنهای فارسی در Chart.js قابل استفاده هستند، اما جهت کلی صفحه و فونت باید با طراحی سایت هماهنگ شود. انتخاب یک فونت فارسی خوانا مانند وزیرمتن یا فونت استاندارد پروژه باعث حرفهایتر شدن نمودار میشود. میتوان فونت عمومی نمودار را از طریق تنظیمات defaults یا فونت هر بخش مانند legend، title و ticks تغییر داد.
در Tooltipها و راهنماهای ترکیبی فارسی و انگلیسی ممکن است ترتیب متن مطابق انتظار نباشد. بهتر است خروجی نهایی را در مرورگرهای مختلف آزمایش کنید. کوتاه نگه داشتن برچسبها و استفاده از عنوانهای واضح نیز به خوانایی کمک میکند. اگر برچسبهای محور افقی طولانی هستند، امکان چرخاندن آنها یا استفاده از نمودار میلهای افقی را بررسی کنید.
بهینهسازی عملکرد Chart.js
برای نمودارهای معمولی با چند ده یا چند صد نقطه، عملکرد Chart.js مناسب است. اما نمایش هزاران نقطه میتواند زمان رندر و تعامل را افزایش دهد. در چنین شرایطی فقط دادههای ضروری را نمایش دهید، بازه زمانی را محدود کنید یا دادهها را پیش از ارسال به مرورگر خلاصهسازی کنید.
- از ایجاد دوباره نمودار در هر تغییر کوچک خودداری کنید و update را به کار ببرید.
- هنگام خروج مؤلفه از صفحه، نمونه نمودار را با destroy حذف کنید.
- برای دادههای بسیار زیاد، انیمیشنهای غیرضروری را غیرفعال کنید.
- تعداد نقاط قابل مشاهده را با فیلتر زمانی یا صفحهبندی کاهش دهید.
- کتابخانه و افزونههایی را بارگذاری کنید که واقعاً در پروژه استفاده میشوند.
- دادههای تکراری یا فاقد ارزش تحلیلی را پیش از رسم پاکسازی کنید.
خطاهای رایج هنگام کار با Chart.js
نمایش داده نشدن نمودار
ابتدا مطمئن شوید فایل کتابخانه بهدرستی بارگذاری شده و در کنسول مرورگر خطایی وجود ندارد. سپس شناسه canvas را بررسی کنید. اجرای اسکریپت پیش از آماده شدن DOM یکی از دلایل رایج دریافت مقدار null است. ارتفاع صفر ظرف والد نیز میتواند نمودار را نامرئی کند.
تفاوت بین آموزشهای قدیمی و نسخه جدید
ساختار تنظیمات Chart.js در نسخههای مختلف تغییر کرده است. برای مثال در نسخههای جدید، تنظیمات legend و title در بخش plugins قرار دارد و تعریف مقیاسها نیز با نسخههای قدیمی متفاوت است. هنگام استفاده از یک نمونه کد، نسخه کتابخانه را بررسی کنید و مستندات همان نسخه را مبنا قرار دهید.
تکرار نمودار روی یک canvas
اگر نمودار را چند بار روی یک canvas ایجاد کنید، ممکن است با خطای مربوط به استفاده شدن canvas مواجه شوید. راه درست این است که نمونه قبلی را بهروزرسانی کنید یا پیش از ساخت نمونه جدید، متد destroy را روی نمودار قبلی اجرا کنید.
نمایش نادرست اعداد
اگر داده از فرم یا API دریافت شده باشد، احتمال دارد نوع آن رشته باشد. دادههای عددی را پیش از تحویل به Chart.js با Number یا روش معتبر دیگری تبدیل کنید. همچنین مقادیر null، undefined و NaN را بررسی کنید تا شکافها یا رفتارهای پیشبینینشده ایجاد نشوند.
نکات طراحی برای نمودارهای حرفهای
- عنوان نمودار را دقیق بنویسید و بازه زمانی یا واحد اندازهگیری را مشخص کنید.
- از رنگهای زیاد و بدون معنا استفاده نکنید.
- واحد اعداد را در محور یا Tooltip نمایش دهید.
- برای مقایسه مقادیر، نمودار میلهای و برای نمایش روند، نمودار خطی را انتخاب کنید.
- از نمودار سهبعدی یا جلوههایی که خوانایی را کاهش میدهند پرهیز کنید.
- نمایش نمودار را در موبایل، تبلت و دسکتاپ آزمایش کنید.
- رنگها را با توجه به کاربران دارای اختلال تشخیص رنگ انتخاب کنید.
جمعبندی آموزش Chart.js
Chart.js راهکاری ساده و قدرتمند برای تبدیل دادههای عددی به نمودارهای تعاملی در وب است. برای شروع، کافی است کتابخانه را نصب کنید، یک canvas بسازید و شیء تنظیماتی شامل type، data و options را به سازنده Chart تحویل دهید. با شناخت datasets میتوانید چند مجموعه داده را مدیریت کنید و با options نیز محورها، عنوان، راهنما، Tooltip، واکنشگرایی و انیمیشن را کنترل کنید.
برای یادگیری بهتر، پیشنهاد میشود ابتدا یک نمودار میلهای ساده با دادههای ثابت بسازید. سپس آن را به نمودار خطی و دوناتی تبدیل کنید، رنگها و Tooltip را تغییر دهید و در مرحله بعد دادهها را از یک API واقعی دریافت کنید. رعایت اصول انتخاب نمودار، قالببندی اعداد، مدیریت خطا و حذف نمونههای قدیمی باعث میشود خروجی نهایی علاوه بر زیبایی، دقیق، سریع و قابل اعتماد باشد.