# راهنمای گام به گام

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

ما یک نمودار را با چند نمودار از ابتدا ایجاد خواهیم کرد:

# یک برنامه جدید با Chart. js بسازید

در یک پوشه جدید ، پرونده pack. json را با مطالب زیر ایجاد کنید:

برنامه های مدرن جلویی اغلب از bundlers ماژول JavaScript استفاده می کنند ، بنابراین ما بسته را انتخاب کرده ایم

(پنجره جدید را باز می کند) به عنوان یک ابزار ساخت خوب پیکربندی صفر. ما همچنین در حال نصب Chart. JS V4 و یک مشتری JavaScript برای Cube هستیم

(پنجره جدید را باز می کند) ، یک API منبع باز برای برنامه های داده ای که ما برای واکشی داده های دنیای واقعی استفاده خواهیم کرد (بیشتر در مورد آن بعداً).

برای نصب وابستگی ها ، نصب NPM ، نصب نخ یا PNPM را اجرا کنید ، سپس پوشه SRC را ایجاد کنید. در داخل آن پوشه ، ما به یک پرونده بسیار ساده index.html نیاز خواهیم داشت:

همانطور که مشاهده می کنید ، Chart. JS به حداقل نشانه گذاری نیاز دارد: یک برچسب بوم با شناسه که بعداً به آن نمودار خواهیم پرداخت. به طور پیش فرض ، نمودارهای Chart. JS پاسخگو هستند و کل ظرف محصور را می گیرند. بنابراین ، ما عرض DIV را برای کنترل عرض نمودار تنظیم می کنیم.

در آخر ، بیایید پرونده SRC/Acquisitions. js را با مطالب زیر ایجاد کنیم:

بیایید از طریق این کد قدم بزنیم:

• نمودار ، کلاس اصلی نمودار. JS را از مسیر ویژه نمودار. JS/Auto وارد می کنیم. این همه نمودارهای موجود را بارگیری می کند. بعداً به آن خواهیم پرداخت.
• ما یک نمونه نمودار جدید را فوری می کنیم و دو آرگومان را ارائه می دهیم: عنصر بوم که در آن نمودار ارائه می شود و گزینه گزینه ها.
• ما فقط باید یک نوع نمودار (BAR) ارائه دهیم و داده هایی را ارائه دهیم که از برچسب ها تشکیل شده است (اغلب ، توضیحات عددی یا متنی از نقاط داده) و مجموعه ای از مجموعه داده ها (Chart. JS از چندین مجموعه داده برای اکثر انواع نمودار پشتیبانی می کند). هر مجموعه داده با یک برچسب تعیین شده و حاوی مجموعه ای از نقاط داده است.
• در حال حاضر ، ما فقط چند ورودی از داده های ساختگی داریم. بنابراین ، ما سال و خواص را برای تولید آرایه های برچسب ها و نقاط داده در تنها مجموعه داده استخراج می کنیم.

زمان اجرای مثال با NPM Run Dev ، Ya Dev یا PNPM Dev و حرکت به LocalHost: 1234

تنها با چند خط کد، نموداری با ویژگی های بسیار داریم: یک افسانه، خطوط شبکه، تیک ها و نکات ابزار نشان داده شده در شناور. صفحه وب را چند بار بازخوانی کنید تا ببینید نمودار نیز متحرک است. روی برچسب «اکتساب ها بر اساس سال» کلیک کنید تا ببینید که می توانید نمایان بودن مجموعه های داده را نیز تغییر دهید (مخصوصاً زمانی که مجموعه های داده متعددی دارید مفید است).

# سفارشی سازی ساده

بیایید ببینیم که چگونه نمودارهای Chart. js را می توان سفارشی کرد. ابتدا، بیایید انیمیشن ها را خاموش کنیم تا نمودار فوراً ظاهر شود. دوم، بیایید افسانه و نکات ابزار را پنهان کنیم زیرا ما فقط یک مجموعه داده و داده های بسیار کم اهمیت داریم.

نمودار جدید (. ) را جایگزین کنید. فراخوانی در src/acquisitions. js با قطعه زیر:

همانطور که می بینید، ما ویژگی گزینه ها را به آرگومان دوم اضافه کرده ایم به این ترتیب می توانید انواع گزینه های سفارشی سازی را برای Chart. js مشخص کنید. انیمیشن با یک پرچم بولین ارائه شده از طریق انیمیشن غیرفعال است. اکثر گزینه های نمودار (به عنوان مثال، پاسخگویی یا نسبت پیکسل دستگاه) به این شکل پیکربندی شده اند.

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

(پنجره جدید باز می شود)، سایر افزونه ها به طور مستقل نگهداری می شوند و می توانند در لیست عالی قرار گیرند

(پنجره جدید را باز می کند) از پلاگین ها، ادغام های چارچوب و انواع نمودار اضافی.

شما باید بتوانید نمودار حداقلی به روز شده را در مرورگر خود مشاهده کنید.

# داده های دنیای واقعی

با داده های سخت کد شده، با اندازه محدود و غیر واقعی، نشان دادن پتانسیل کامل Chart. js دشوار است. بیایید به سرعت به یک API داده متصل شویم تا برنامه مثال خود را به یک مورد استفاده تولید نزدیک کنیم.

بیایید فایل src/api. js را با محتوای زیر ایجاد کنیم:

بیایید ببینیم آنجا چه اتفاقی می افتد:

• ما کتابخانه سرویس گیرنده جاوا اسکریپت را برای Cube وارد می کنیم

   

(پنجره جدید باز می شود) و به یک پایگاه داده با مجموعه داده عمومی متصل می شود

(پنجره جدید باز می شود) از~140000 رکورد که همه آثار هنری موجود در مجموعه موزه هنر مدرن را نشان می دهد

اکنون، بیایید داده های دنیای واقعی را به نمودار خود تحویل دهیم. لطفاً چند تغییر را در src/acquisitions. js اعمال کنید: یک import اضافه کنید و تعریف متغیر داده را جایگزین کنید.

انجام شده! اکنون نمودار ما با داده های دنیای واقعی به این شکل است. به نظر می رسد اتفاق جالبی در سال های 1964، 1968 و 2008 رخ داده است!

کار ما با نمودار میله ای تمام شد. بیایید یک نوع نمودار دیگر Chart. js را امتحان کنیم.

# سفارشی سازی بیشتر

Chart. js از بسیاری از انواع نمودار مشترک پشتیبانی می کند.

به عنوان مثال ، نمودار حباب اجازه می دهد تا سه بعد داده ها را همزمان نمایش دهید: مکان هایی در محورهای x و y دو بعد را نشان می دهد ، و بعد سوم با اندازه حباب های فردی نشان داده می شود.

برای ایجاد نمودار ، برنامه در حال اجرا را متوقف کنید ، سپس به SRC/index.html بروید و دو خط زیر را نادیده بگیرید:

سپس پرونده src/dimensions. js را با مطالب زیر ایجاد کنید:

احتمالاً ، همه چیز در آنجا بسیار ساده است: ما از API داده ها را دریافت می کنیم و نمودار جدیدی را با نوع حباب ارائه می دهیم و از سه بعد داده ها به عنوان خواص X ، Y و R (شعاع) عبور می کنیم.

در حال حاضر ، ذخیره های ذخیره شده با R M-RF . Parce l-Cache را تنظیم کنید و دوباره برنامه را با NPM Run Dev ، Ya Dev یا PNPM Dev شروع کنید. اکنون می توانیم نمودار جدید را مرور کنیم:

خوب ، زیبا به نظر نمی رسد.

اول از همه ، نمودار مربع نیست. عرض و ارتفاع آثار هنری به همان اندازه مهم است ، بنابراین ما می خواهیم عرض نمودار را با قد آن نیز برابر کنیم. به طور پیش فرض ، نمودارهای Chart. JS نسبت ابعاد 1 (برای همه نمودارهای شعاعی ، به عنوان مثال ، نمودار پیراشکی) یا 2 (برای بقیه) دارند. بیایید نسبت ابعاد را برای نمودار ما تغییر دهیم:

اکنون خیلی بهتر به نظر می رسد:

با این حال ، هنوز ایده آل نیست. محور افقی از 0 تا 500 فاصله دارد در حالی که محور عمودی از 0 تا 450 فاصله دارد. به طور پیش فرض ، Chart. js به طور خودکار دامنه (حداقل و حداکثر مقادیر) محورها را به مقادیر ارائه شده در مجموعه داده تنظیم می کند ، بنابراین نمودار "متناسب است"داده های شما. ظاهراً ، مجموعه MOMA آثار هنری در محدوده 450 تا 500 سانتی متر ارتفاع ندارد. بیایید پیکربندی محورها را برای نمودار ما تغییر دهیم تا این موضوع را حساب کنیم:

عالی! نمودار به روز شده را ببینید:

با این حال ، یک nitpick دیگر وجود دارد: این اعداد چیست؟خیلی واضح نیست که واحدها سانتیمتر هستند. بیایید یک قالب کنه سفارشی را در هر دو محور اعمال کنیم تا همه چیز روشن شود. ما یک عملکرد پاسخ به تماس را ارائه می دهیم که برای قالب بندی هر مقدار تیک فراخوانی می شود. در اینجا پیکربندی محورهای به روز شده است:

عالی ، اکنون واحدهای مناسبی در هر دو محور داریم:

# چندین مجموعه داده

Chart. JS هر مجموعه داده را به طور مستقل ترسیم می کند و اجازه می دهد سبک های سفارشی را برای آنها اعمال کنید.

به نمودار نگاهی بیندازید: یک "خط" قابل مشاهده حباب با مختصات برابر X و Y وجود دارد که نمایانگر آثار هنری مربع هستند. جالب خواهد بود که این حباب ها را در مجموعه داده های خود قرار داده و آنها را متفاوت نقاشی کنید. همچنین ، ما می توانیم آثار هنری "بلندتر" را از "گسترده تر" جدا کنیم و آنها را نیز متفاوت نقاشی کنیم.

در اینجا آمده است که چگونه می توانیم این کار را انجام دهیم. مجموعه داده ها را با کد زیر جایگزین کنید:

همانطور که مشاهده می کنید ، ما سه مجموعه داده را با برچسب های مختلف تعریف می کنیم. هر مجموعه داده برش داده های خود را با فیلتر استخراج می کند. اکنون آنها از لحاظ بصری متمایز هستند و همانطور که از قبل می دانید ، می توانید دید آنها را به طور مستقل تغییر دهید.

در اینجا ما به پالت رنگ پیش فرض متکی هستیم. با این حال ، به خاطر داشته باشید که هر نوع نمودار از گزینه های مجموعه داده های زیادی پشتیبانی می کند که می توانید برای سفارشی سازی آنها احساس راحتی کنید.

# افزونه ها

یکی دیگر از موارد دیگر و بسیار قدرتمند! برای سفارشی کردن نمودارهای نمودار استفاده از افزونه ها است. می توانید مقداری در فهرست افزونه پیدا کنید

(پنجره جدید را باز می کند) یا موارد خود را به صورت موقت ایجاد کنید. در اکوسیستم Chart. js ، این اصطلاحات است و انتظار می رود نمودارهای تنظیم شده را با افزونه ها تنظیم کنید. به عنوان مثال ، می توانید پس زمینه بوم را سفارشی کنید یا با افزونه های ساده موقت ، یک مرز را به آن اضافه کنید. بیایید دومی را امتحان کنیم.

افزونه ها دارای یک API گسترده هستند اما به طور خلاصه ، یک افزونه به عنوان یک شی با نام و یک یا چند عملکرد پاسخ به تماس تعریف شده در نقاط پسوند تعریف می شود. قطعه زیر را قبل و به جای نمودار جدید وارد کنید (.) ؛دعوت در SRC/DIMENSIONS. JS:

همانطور که مشاهده می کنید ، در این افزونه Chartareaborder ، زمینه بوم را به دست می آوریم ، وضعیت فعلی خود را ذخیره می کنیم ، سبک ها را اعمال می کنیم ، شکل مستطیل شکل را در اطراف منطقه نمودار می کشید و حالت بوم را باز می گردانیم. ما همچنین در حال عبور از افزونه ها در افزونه ها هستیم ، بنابراین فقط در مورد این نمودار خاص اعمال می شود. ما همچنین گزینه های افزونه را در گزینه ها منتقل می کنیم. Plugins. ChartareAborder ؛مطمئناً می توانیم آنها را در کد منبع افزونه سخت کنیم اما از این طریق بسیار قابل استفاده مجدد است.

نمودار حباب ما اکنون جالب تر به نظر می رسد:

# لرزش درخت

در تولید ، ما تلاش می کنیم تا حد ممکن کد کمتری را حمل کنیم ، بنابراین کاربران نهایی می توانند برنامه های داده ما را سریعتر بارگذاری کرده و تجربه بهتری داشته باشند. برای این ، ما باید از لرزش درخت استفاده کنیم

(پنجره جدید را باز می کند) که اصطلاح فانتزی برای از بین بردن کد بلااستفاده از بسته نرم افزاری JavaScript است.

Chart. js با طراحی مؤلفه خود به طور کامل از لرزش درخت پشتیبانی می کند. شما می توانید تمام اجزای Chart. js را به طور همزمان ثبت کنید (که در هنگام نمونه سازی مناسب است) و آنها را با برنامه خود همراه کنید. یا ، شما می توانید فقط مؤلفه های لازم را ثبت کنید و یک بسته حداقل ، اندازه بسیار کمتری را دریافت کنید.

بیایید برنامه مثال ما را بازرسی کنیم. اندازه بسته نرم افزاری چیست؟می توانید برنامه را متوقف کرده و ساخت NPM Run ، یا ساخت نخ یا ساخت PNPM را اجرا کنید. در چند لحظه ، شما چیزی شبیه به این خواهید گرفت:

ما می توانیم ببینیم که Chart. js و سایر وابستگی ها در یک پرونده 265 کیلوبایت با هم جمع شده اند.

برای کاهش اندازه بسته نرم افزاری ، ما باید چند تغییر در SRC/Acquisitions. js و Src/Dimensions. js اعمال کنیم. ابتدا باید بیانیه واردات زیر را از هر دو پرونده حذف کنیم: نمودار واردات از "Chart. js/Auto".

درعوض ، بیایید فقط مؤلفه های لازم را بارگیری کنیم و آنها را با استفاده از Chart. js با استفاده از Chart. J. Register (.) ثبت کنید. در اینجا آنچه ما در SRC/Acquisitions. js نیاز داریم:

و این قطعه برای SRC/Dimensions. js است:

می بینید که علاوه بر کلاس نمودار ، ما همچنین یک کنترلر را برای نوع نمودار ، مقیاس ها و سایر عناصر نمودار (به عنوان مثال ، میله یا امتیاز) بارگیری می کنیم. می توانید تمام مؤلفه های موجود را در اسناد جستجو کنید.

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

به یاد داشته باشید که هنگام تهیه برنامه خود برای تولید ، واردات را از Chart. js/Auto با دقت بررسی کنید. فقط یک واردات مانند این طول می کشد تا به طور مؤثر لرزش درخت را غیرفعال کند.

اکنون ، بگذارید یک بار دیگر درخواست ما را بازرسی کنیم. نخ را اجرا کنید و چنین چیزی را بدست آورید:

با وارد کردن و ثبت فقط مؤلفه های انتخابی ، بیش از 56 کیلوبایت کد غیر ضروری حذف کرده ایم. با توجه به اینکه سایر وابستگی ها طول می کشد~50 کیلوبایت در بسته نرم افزاری ، لرزش درخت به از بین بردن کمک می کند~25 ٪ از CHART. JS کد از بسته نرم افزاری برای برنامه مثال ما.

# مراحل بعدی

اکنون با تمام مفاهیم اصلی Chart. js آشنا هستید: انواع نمودار و عناصر ، مجموعه داده ها ، سفارشی سازی ، افزونه ها ، مؤلفه ها و لرزش درخت.

در صورت تمایل می توانید نمونه های بسیاری از نمودارها را در اسناد بررسی کنید و لیست عالی را بررسی کنید

(پنجره جدید را باز می کند) از افزونه های Chart. JS و انواع نمودار اضافی و همچنین ادغام چارچوب

(پنجره جدید را باز می کند) (به عنوان مثال ، React ، Vue ، Svelte و غیره). همچنین ، دریغ نکنید که به Chart. js Slack بپیوندید