# کارایی

نمودارهای Chart. JS بر روی عناصر بوم ارائه می شود ، که باعث می شود رندر بسیار سریع باشد. برای مجموعه داده های بزرگ یا برنامه های حساس به عملکرد ، ممکن است بخواهید نکات زیر را در نظر بگیرید.

# ساختار و قالب داده

# تجزیه

داده های آماده شده را در قالب داخلی پذیرفته شده توسط مجموعه داده ها و مقیاس ها ارائه دهید و تجزیه را تنظیم کنید: false. برای اطلاعات بیشتر به ساختار داده ها مراجعه کنید.

# عادی سازی داده ها

Chart. js سریعترین است اگر داده هایی را با شاخص هایی که منحصر به فرد ، مرتب شده و سازگار در بین مجموعه داده ها هستند ارائه می دهید و گزینه عادی را ارائه می دهید: واقعی برای اینکه به Chart. js اطلاع دهید که شما این کار را کرده اید. حتی بدون این گزینه ، گاهی اوقات می تواند سریعتر تهیه داده های مرتب شده باشد.

# تجزیه

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

افزونه Decimation را می توان با نمودارهای خط برای تعیین داده ها قبل از ارائه نمودار استفاده کرد. این بهترین عملکرد را ارائه می دهد زیرا باعث کاهش حافظه مورد نیاز برای ارائه نمودار می شود.

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

# محاسبه کنه

# چرخش

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

# نمونه برداری

گزینه Ticks. Samplesize را تنظیم کنید. این تعیین می کند که برچسب های شما چقدر بزرگ است با نگاه کردن به زیر مجموعه ای از آنها به منظور سریعتر کردن محورها. اگر واریانس زیادی در اندازه برچسب های شما وجود نداشته باشد ، این بهترین کار است.

# انیمیشن ها را غیرفعال کنید

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

برای غیرفعال کردن انیمیشن ها

# برای مقیاس ها حداقل و حداکثر را مشخص کنید

اگر MIN و MAX را مشخص کنید ، مقیاس لازم نیست دامنه داده ها را محاسبه کند.

# ارائه موازی با کارگران وب (فقط کروم)

Chromium (Chrome: نسخه 69 ، Edge: 79 ، Opera: 56) امکان انتقال کنترل رندر یک بوم را اضافه کرد

(پنجره جدید را باز می کند) به یک کارگر وب. کارگران وب می توانند از API Offscreencanvas استفاده کنند

(پنجره جدید را باز می کند) برای ارائه از یک کارگر وب بر روی بوم های موجود در DOM. Chart. JS یک کتابخانه مبتنی بر بوم است و از ارائه در یک کارگر وب پشتیبانی می کند - فقط به جای یک عنصر بوم ، یک Offscreencanvas را به سازنده نمودار منتقل کنید. توجه داشته باشید که از امروز ، این API فقط در مرورگرهای مبتنی بر کروم پشتیبانی می شود.

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

• انتقال داده ها بین موضوعات می تواند گران باشد ، بنابراین اطمینان حاصل کنید که اشیاء پیکربندی و داده شما تا حد امکان کوچک هستند. اگر می توانید آنها را از طرف کارگر تولید کنید (کارگران می توانند درخواست HTTP را انجام دهند!) یا انتقال آنها به عنوان کارگران به عنوان کارگران ، که می توانند به سرعت از یک موضوع به موضوع دیگر منتقل شوند.
• شما نمی توانید توابع بین موضوعات را منتقل کنید ، بنابراین اگر شیء پیکربندی شما شامل توابع است ، باید قبل از انتقال آنها را از بین ببرید و بعداً آنها را اضافه کنید.
• شما نمی توانید از موضوعات کارگر به DOM دسترسی پیدا کنید ، بنابراین افزونه های Chart. js که از DOM استفاده می کنند (از جمله هرگونه تعامل ماوس) به احتمال زیاد کار نمی کنند.
• اطمینان حاصل کنید که اگر از مرورگرهای غیر از مدرن ترین مرورگرهای کروم پشتیبانی می کنید ، از مرورگرهایی برخوردار هستید.
• تغییر اندازه نمودار باید به صورت دستی انجام شود. مثالی را در کد کارگر زیر مشاهده کنید.

مثال کد اصلی موضوع:

مثال کد کارگر ، در worker. js:

# نمودارهای خط

# منحنی های Bézier را غیرفعال کنید

اگر خطوطی را در نمودار خود ترسیم می کنید ، غیرفعال کردن منحنی های Bézier باعث بهبود زمان رندر می شود زیرا ترسیم یک خط مستقیم نسبت به منحنی Bézier اجرا می شود. منحنی های Bézier به طور پیش فرض غیرفعال می شوند.

# تجزیه خودکار داده ها در طول قرعه کشی

عنصر خط به طور خودکار داده ها را به دست می آورد ، هنگامی که تنش ، پله و BorderDash به ترتیب بر روی مقادیر پیش فرض خود قرار می گیرند (به ترتیب نادرست ، 0 و []). این امر با پرش از نقاشی بخش های خط نامرئی ، سرعت رندر را بهبود می بخشد.

# اسپانگ ها را فعال کنید

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

برای فعال کردن اسپانگ ها:

# نقاشی خط غیرفعال کردن

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

برای غیرفعال کردن خطوط:

# نقاشی نقطه غیرفعال کردن

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

برای غیرفعال کردن نقاشی نقطه:

# هنگام انتقال با بابل ، استفاده از حالت شل را در نظر بگیرید

بابل 7. 9 نحوه ساخت کلاس ها را تغییر داد. آهسته است ، مگر اینکه با حالت شل استفاده شود. اطلاعات بیشتر