کتابخانه
Chartist یه کتابخانه سبک جاوااسکریپته برای رسم نمودارهای ریسپانسیو. خروجی نمودارها SVG هست و ظاهرشون رو با CSS تنظیم می کنی. اگه برای داشبورد یا صفحه گزارش سایتت نمودار خطی، ستونی یا دایره ای می خوای و دنبال چیزی ساده و قابل شخصی سازی هستی، گزینه خوبیه.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT OR WTFPL؛ هش هر فایل با منبع بررسی شده است.
۹۷۰ کیلوبایت · ۲۳ فایل · انتشار
دانلود هفتگی جهانی
۱۳۸٫۶ هزار
هفته ۲۵ مهر تا ۱ آبان۳٫۲٪ کمتر از هفته قبل
منبع: npmبه‌روزرسانی آمار
SHA-256: 3f27c9d8c20b6b2082834d9b50f95777ac87e65ca42bb1c2b8c1bd40ff66d995
Chartist یه کتابخانه جاوااسکریپته برای کشیدن نمودارهای ساده و ریسپانسیو توی صفحه وب. نمودارها رو با SVG می سازه، نه روی canvas. یعنی رنگ، ضخامت خط، فاصله ها و فونت نمودار رو مثل بقیه اجزای صفحه با CSS عوض می کنی و برای هر تغییر ظاهری لازم نیست دنبال گزینه ای توی تنظیمات جاوااسکریپت بگردی. نمودار خطی، ستونی و دایره ای رو پوشش می ده و برای خیلی از کارهای روزمره کافیه.
به درد کسی می خوره که نمودار تمیز و سبک می خواد، نه یه پنل کامل تحلیل داده. مثلا گزارش فروش ماهانه توی پنل یه فروشگاه وردپرسی، آمار بازدید توی صفحه مدیریت یا مقایسه چند عدد توی صفحه معرفی خدمات. ریسپانسیو بودنش هم یعنی می تونی تنظیمات نمودار رو برای عرض های مختلف صفحه جدا تعریف کنی، که برای مخاطب موبایل خیلی به کار می آد. ولی اگه نمودار خیلی تخصصی می خوای، مثل نقشه حرارتی یا کندل استیک مالی، یا قراره ده ها هزار نقطه داده رو یک جا نشون بدی، سراغ ابزار دیگه ای برو. SVG با تعداد زیاد نقطه کند می شه. نقشه جغرافیایی هم از این کتابخانه در نمی آد.
موقع انتخاب و استفاده چند نکته هست. ظاهر نمودار با CSS ساخته می شه، پس فایل استایل کتابخانه رو هم باید توی صفحه بیاری. اگه فقط جاوااسکریپت رو بذاری، نمودار شکل درستی نداره و اولین چیزی که باید چک کنی همینه. روش وارد کردن کتابخانه توی پروژه هم بین نسخه های قدیمی و جدید فرق داره، پس مستندات همون نسخه ای رو بخون که برداشتی.
برای سایت فارسی یه تست جدی هم بکن. فونت برچسب ها از صفحه ارث می رسه، ولی جهت راست به چپ و ترتیب برچسب های محور رو باید روی نمودار واقعی ببینی. تاریخ شمسی رو هم بهتره قبل از دادن به نمودار تبدیل کنی و رشته آماده رو به عنوان برچسب بدی.
طبق اعلام سازنده، یعنی Gion Kunz، مجوز Chartist یکی از دو مجوز MIT یا WTFPL هست که استفاده توی پروژه های شخصی و تجاری رو راحت می کنه. با این حال برای پروژه تجاری، متن مجوز همون نسخه ای که برمی داری رو یه بار بخون. وقتی دسترسی به npm یا CDN های خارجی قطع یا کند باشه، نسخه های رسمی و بدون تغییر این کتابخانه رو توی مخزن داخلی ما هم پیدا می کنی و می تونی از همین صفحه برداری.
برای استفاده از Chartist لازم نیست پروژه بزرگی داشته باشی. یه صفحه HTML ساده هم کافیه. مسیر کلی کار این شکلیه:
اگه با npm کار می کنی، بسته رو با نام chartist نصب کن و روش import رو از مستندات نسخه خودت ببین. بعد از اولین اجرا، صفحه رو یه بار روی موبایل و یه بار با متن فارسی تست کن تا مطمئن بشی برچسب ها درست دیده می شن.
Chartist یه کتابخانه جاوااسکریپته برای رسم نمودارهای خطی، ستونی و دایره ای. نمودارها رو با SVG می سازه و ظاهرشون رو با CSS کنترل می کنی. برای گزارش و آمار ساده توی سایت یا پنل مدیریت مناسبه، نه برای نمودارهای خیلی تخصصی یا حجم داده بسیار بالا.
برچسب ها از فونت صفحه استفاده می کنن، پس فونت فارسی سایتت معمولا اعمال می شه. با این حال جهت راست به چپ و چیدمان محورها رو حتما روی نمودار واقعی تست کن. تاریخ شمسی رو هم قبل از دادن به نمودار تبدیل کن و رشته آماده رو به عنوان برچسب بده.
Chart.js نمودارها رو روی canvas می کشه، ولی Chartist خروجی SVG می ده و ظاهرش با CSS عوض می شه. Chartist ساده تره و برای نمودارهای پایه کافیه. اگه تنوع بیشتر نوع نمودار و افزونه می خوای، مستندات هر دو رو با نیاز پروژه ات مقایسه کن.
معمولا چون فایل CSS کتابخانه توی صفحه لود نشده. ظاهر نمودار با CSS ساخته می شه و فقط افزودن جاوااسکریپت کافی نیست. توی تب Network مرورگر ببین فایل استایل بدون خطا بارگذاری می شه یا نه و مسیرش درسته یا نه.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.