یک نمودار میلهای تعاملی با دادههای نمونه بسازید که ارتفاع میلهها بر اساس آرایهای از اعداد رسم شود، با حرکت ماوس مقدار هر میله را به صورت tooltip نشان دهد و با کلیک روی یک میله آن را برجسته یا فیلتر کند.
1.0 بازدید آخرین ویرایش در 220 روز قبل ساعت 01:49 0.0
برای پیادهسازی از HTML + SVG یا canvas همراه با JavaScript استفاده کنید؛ با تبدیل مقادیر داده به ارتفاع (scale) مستطیلها را رسم کنید، برای tooltip از یک عنصر div که موقعیت آن را بر اساس رویداد mousemove تغییر میدهید استفاده کنید و با event listeners برای mouseover/mouseout مقدار را نمایش/مخفی کنید. برای کلیک روی میلهها کلاس CSS یا صفت data را تغییر دهید تا برجسته شود یا از آن بهعنوان فیلتر برای پنهان/نمایان کردن دیگر میلهها استفاده کنید. در صورت تمایل میتوانید به جای پیادهسازی از صفر از کتابخانه سادهای مثل D3.js برای scale و مدیریت رویدادها بهره ببرید؛ دقت کنید کد خوانا باشد و به واکنشپذیری (resize) و مقیاسبندی مناسب توجه کنید.
توسط پژوهشگر در 220 روز قبل ساعت 01:49 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
نکتهای که میتواند به کیفیت پیادهسازی کمک کند این است که مقیاس ارتفاع میلهها را با کتابخانهای مانند D3 یا یک تابع scale ساده با توجه به حداکثر مقدار داده تعریف کنید تا ارتفاعها نسبت به فضای رسم همواره همگن باقی بمانند. همچنین پیشنهاد میشود tooltip را با استفاده از موقعیت mousemove بهروزرسانی کنید و با رعایت padding و فاصله از میلهها از لرزش نمایش جلوگیری کنید. برای برجستهسازی یا فیلتر کردن، از data- attributes استفاده کنید تا با رویداد click سایر میلهها بهطور پویا پنهان یا نمایش داده شوند. بهعلاوه، دسترسیپذیری را فراموش نکنید: با کلاسهای CSS برای تمرکز، و aria-label برای هر میله و کنترلهای کیبردی اضافه کنید.
گزارش