با استفاده از 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() دادهها را بهروزرسانی کنید.
1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
برای ساخت یک نمودار میلهای با Chart.js کافی است یک canvas در HTML قرار دهید و دادهها را در JavaScript آماده کنید. برای رنگبندی هر میله بر اساس مقدارش میتوانید از data.map استفاده کنید و backgroundColor هر میله را برابر با v > 50 ? 'green' : 'red' قرار دهید. از گزینههای responsive و tooltips استفاده کنید تا نمودار در اندازههای مختلف به خوبی نمایش داده شود. در صورت بهروزرسانی دادهها، میتوانید chart.update() را فراخوانی کنید یا دادههای دیتاست را تغییر داده و دوباره بهروزرسانی کنید.
گزارش