کتابخانه
chartjs-plugin-datalabels یه پلاگین برای Chart.js هست که روی میله ها، قطعه های دونات و نقطه های نمودار، مقدار یا هر متن دلخواه رو به صورت برچسب نشون می ده. با اون دیگه لازم نیست کاربر برای دیدن عدد، موس رو روی نمودار نگه داره. مجوزش MIT هست و از npm نصب می شه.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT؛ هش هر فایل با منبع بررسی شده است.
۸۰ کیلوبایت · ۶ فایل · انتشار
دانلود هفتگی جهانی
۱٫۶ میلیون
هفته ۲۵ مهر تا ۱ آبان۲٪ بیشتر از هفته قبل
منبع: npmبه‌روزرسانی آمار
SHA-256: 20c08f3d9c6d2ef76df6d6a6f1127c0013339fe32add24222276c398c6308c38
Chart.js به صورت پیش فرض مقدار هر المان رو فقط توی tooltip نشون می ده، اون هم وقتی موس روش بره. روی دسکتاپ شاید همین کافی باشه، ولی همین نمودار رو اسکرین شات بگیری، توی گزارش PDF بذاری یا روی موبایل نگاه کنی، هیچ عددی دیده نمی شه. chartjs-plugin-datalabels دقیقاً برای همین ساخته شده: روی میله، نقطه یا قطعه دایره یه برچسب می ذاره و مقدار رو همون جا نشون می ده.
کارش فقط چاپ عدد نیست. با گزینه هایی مثل anchor، align و offset تعیین می کنی برچسب کجای المان بشینه. با formatter متنش رو عوض می کنی، مثلاً درصد به جای عدد خام یا مبلغ با جداکننده هزارگان. با color، font، backgroundColor، borderRadius و padding هم ظاهرش رو با طراحی سایتت هماهنگ می کنی. گزینه ها رو می شه برای کل نمودار، برای یه دیتاست یا حتی برای تک تک المان ها تنظیم کرد، چون خیلی از اون ها تابعی (scriptable) هستن. مثلاً با display می تونی برچسب قطعه های خیلی کوچک دونات رو پنهان کنی تا روی هم نیفتن.
توی سایت های ایرانی چند نکته رو حتماً در نظر بگیر. اعداد فارسی و جداکننده هزارگان رو خودت توی formatter درست می کنی، مثلاً با toLocaleString و زبان fa-IR. فونت فارسی هم باید قبل از رسم نمودار لود شده باشه. متن روی canvas کشیده می شه و اگه فونت دیر برسه، ممکنه برچسب ها با فونت پیش فرض دربیان. داشبورد فروش، پنل مدیریت، گزارش پروژه و نتیجه نظرسنجی از جاهای رایج استفاده از این پلاگین هستن.
جاهایی هم هست که این پلاگین انتخاب خوبی نیست. اگه نمودارت صدها نقطه داره، برچسب ها روی هم می افتن و نمودار شلوغ می شه. اونجا tooltip بهتره، یا باید فقط برای چند نقطه مهم برچسب بذاری. پلاگین تنهایی هم کار نمی کنه و به Chart.js نیاز داره. نسخه اون هم باید با نسخه Chart.js سایتت سازگار باشه، پس قبل از نصب ببین چی استفاده می کنی. مجوز MIT هم اجازه استفاده تجاری می ده. نسخه های رسمی و بدون تغییر chartjs-plugin-datalabels توی مخزن داخلی ما هم هست، برای روزهایی که npm یا CDN های خارجی در دسترس نیستن.
اول مطمئن شو Chart.js توی صفحه لود می شه، چون پلاگین باید بعد از اون بیاد. بعدش کد آماده پایین همین صفحه رو به صفحه اضافه کن و این قدم ها رو جلو برو:
برای متن فارسی، مطمئن شو فونتت قبل از ساخت نمودار لود شده و اعداد رو هم توی formatter فرمت کن.
پلاگین chartjs-plugin-datalabels رو بعد از Chart.js اضافه کن و اگه لازم بود ثبتش کن. بعدش با تنظیم های options.plugins.datalabels مثل anchor و align، جای برچسب رو مشخص می کنی. به صورت پیش فرض مقدار هر المان روی خودش نوشته می شه و دیگه به موس نیازی نیست.
چون ثبت سراسری پلاگین روی همه نمودارها اثر می ذاره. اگه فقط یه نمودار برچسب می خواد، پلاگین رو سراسری ثبت نکن و توی آرایه plugins همون نمودار بده. یا برای بقیه نمودارها گزینه display رو false کن تا برچسبی نشون داده نشه.
آره. توی formatter مقدار هر قطعه رو بر مجموع داده ها تقسیم می کنی، ضرب در صد می کنی و رشته نهایی رو برمی گردونی. با همین روش می تونی مبلغ با جداکننده هزارگان یا عدد فارسی هم نشون بدی، بدون این که داده اصلی نمودار تغییر کنه.
نه. chartjs-plugin-datalabels فقط یه پلاگین هست و برای ساخت نمودار به خود Chart.js نیاز داره. پس اول Chart.js رو توی صفحه لود کن و بعدش پلاگین رو بیار. ترتیب برعکس معمولاً باعث خطا می شه. حواست باشه نسخه پلاگین با نسخه Chart.js سایتت سازگار باشه، وگرنه ممکنه ثبتش خطا بده یا برچسب ها نیان.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.