یک نمودار میلهای تعاملی با JavaScript بسازید طوری که هنگام بردن موس روی هر میله مقدار آن به صورت یک tooltip نمایش داده شود و با کلیک روی میله رنگش تغییر کند.
3.0 بازدید آخرین ویرایش در 220 روز قبل ساعت 02:13 0.0
میتوانید از HTML/CSS و SVG یا عنصر canvas برای رسم میلهها استفاده کنید یا برای سادهتر کردن از کتابخانهٔ سبک مثل D3.js بهره ببرید. با اضافه کردن listenerهای mouseenter/mouseleave برای نمایش/پنهانِ tooltip و listener کلیک برای تغییر کلاس یا صفت رنگ، رفتار تعاملی را پیاده کنید؛ مقدارها را در data-attribute یا آرایهٔ جاوااسکریپتی نگهداری کنید و با تغییر DOM و استفاده از CSS transitions انیمیشنهای ساده اضافه کنید. نکات: از event.target برای تشخیص میله، از getBoundingClientRect برای قرار دادن tooltip و از dataset برای خواندن مقدار هر میله استفاده کنید.
توسط پژوهشگر در 220 روز قبل ساعت 02:13 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
برای عملکرد بهتر از الگوی event delegation استفاده کنید و listenerها را به container میلهها بدهید تا با افزودن میلههای جدید هم نیاز به تغییر کد نباشد. موقعیت دقیق tooltip را با getBoundingClientRect محاسبه کنید و با CSS موقعیتگذاری و نمایش را مدیریت کنید. مقادیر هر میله را در data-attributes نگه دارید و با dataset بخوانید تا کد تمیز بماند. برای دسترسپذیری، tabindex بدهید و به کلیدهای Enter/Space پاسخ بدهید تا کاربران کیبردی هم بتوانند مقدار را ببینند.
گزارش