با استفاده از Chart.js یک نمودار میله‌ای ساده در صفحه وب بسازید که مقادیر فروش هفت روز هفته را نشان دهد و رنگ هر میله بر اساس مقدار آن (بیشتر از 50 سبز، مساوی یا کمتر از 50 قرمز) تنظیم شود.

1.0 بازدید آخرین ویرایش در 221 روز قبل ساعت 01:16

0.0

برای حل این مسئله از Chart.js (از طریق CDN یا نصب npm) استفاده کنید: یک عنصر canvas در HTML قرار دهید، آرایه‌ای از برچسب‌های روزها و آرایه‌ای از مقادیر فروش در JavaScript آماده کنید، سپس با استفاده از new Chart(ctx, {type: 'bar', data: {...}, options: {...}}) نمودار را بسازید. برای تعیین رنگ میله‌ها می‌توانید با استفاده از متد map روی آرایه‌ی داده‌ها آرایه backgroundColor تولید کنید که برای هر مقدار رنگ مناسب (مثلاً value > 50 ? 'green' : 'red') بازگرداند؛ همچنین از گزینه‌های responsive و tooltips برای نمایش بهتر استفاده کنید و در صورت نیاز با chart.update() داده‌ها را به‌روزرسانی کنید.

توسط پژوهشگر در 221 روز قبل ساعت 01:16
دسته بندی ها: JavaScript JavaScript for beginner
sara در 221 روز قبل ساعت 13:54

برای ساخت یک نمودار میله‌ای با Chart.js کافی است یک canvas در HTML قرار دهید و داده‌ها را در JavaScript آماده کنید. برای رنگ‌بندی هر میله بر اساس مقدارش می‌توانید از data.map استفاده کنید و backgroundColor هر میله را برابر با v > 50 ? 'green' : 'red' قرار دهید. از گزینه‌های responsive و tooltips استفاده کنید تا نمودار در اندازه‌های مختلف به خوبی نمایش داده شود. در صورت به‌روزرسانی داده‌ها، می‌توانید chart.update() را فراخوانی کنید یا داده‌های دیتاست را تغییر داده و دوباره به‌روزرسانی کنید.

گزارش

1 پاسخ

جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من

در حال بارگیری...
ورود به حساب کاربری