تم تاریک
دونات چارت Donut Chart
کامپوننت Donut Chart یک کامپوننت تجسم داده (Data Visualization) است که برای نمایش سهم هر بخش از یک کل (Part-to-Whole Relationship) استفاده میشود. این کامپوننت با فرم حلقهای خود، امکان قرارگیری یک شاخص خلاصه یا محتوای سفارشی را در مرکز فراهم کرده و نسبت به نمودارهای دایرهای ساده (Pie Chart)، فضای بصری کارآمدتری در اختیار طراح قرار میدهد.
نمونه زنده
آناتومی
نمودار دوناتی از بخشهای کلیدی زیر تشکیل شده است:
( نمایش آناتومی Donut Chart شامل حلقه برشها، فضای مرکز، راهنمای نمودار و تولتیپ هوور با خطوط راهنما)
- حلقه اصلی (Ring/Slices): بخشهای رنگی نشاندهنده دستهها یا دادههای مختلف که مجموع آنها ۱۰۰٪ (یا کل مقدار) را تشکیل میدهد.
- اسلات محتوای مرکز (Center Slot): فضای خالی وسط حلقه برای نمایش عدد کل، شاخص کلیدی (KPI)، لیبل اصلی یا وضعیت کلی.
- شکاف بین برشها (Segment Gap): خط مرزی شفاف یا سفید بین برشها برای تفکیک بصری بهتر.
- راهنمای نمودار (Legend): لیست توضیحی رنگها و عناوین دستهها که میتواند در زیر یا کنار نمودار قرار گیرد.
- تولتیپ تعاملی (Tooltip): کادر شناوری که با هوور کردن روی هر برش، مقادیر دقیق و درصد آن دسته را نمایش میدهد.
ساختار
ضخامت حلقه (Ring Thickness)
- Standard Thickness: ضخامت حلقه
48pxتنظیم میشود تا فضای مرکز کافی برای درج دیتا باقی بماند. - فاصله بین برشها (Segment Gap): فاصله ثابت
0pxجهت تفکیک قطعات.
محتوای مرکز و راهنمای نمودار Center Slot & Legend
۳.۱ اسلات مرکز (Center Content)
این بخش مرکز تمرکز بصری نمودار است و نباید با اطلاعات زیاد شلوغ شود. الگوی استاندارد چیدمان در مرکز:
- سطر اول (عدد شاخص): مقدار کل یا درصد اصلی همراه با واحد اندازه گیری
- سطر دوم (لیبل توضیحی): عنوان کوتاه شاخص با فونت کوچکتر و رنگ خنثی (Subtle Text).
۳.۲ راهنمای نمودار (Legend Positioning)
- چیدمان عمودی (side): راهنمای نمودار در سمت چپ (در محیط RTL) قرار میگیرد،
- چیدمان افقی (below): راهنمای نمودار در زیر نمودار قرار میگیرد، مناسب برای سایز Small یا کارتهای با عرض محدود.
حالات و وضعیتهای تعاملی
( نمایش وضعیتهای مختلف Donut Chart شامل Default ،Hover on Slice ،Disabled/Empty و Loading)
| وضعیت (State) | رفتار و تغییر بصری |
|---|---|
| Default | نمایش عادی تمام قطعات با پلت رنگی مشخصشده. |
| Hover (رویداد موس) | برشِ مربوطه با انیمیشن ملایم کمی بزرگتر و برجستهتر میشود (Scale up) و سایر قطعات با دیمشدن عقب میروند. تولتیپ مقادیر ظاهر میشود. |
| Empty / No Data | حلقه به صورت یکدست به رنگ خاکستری خنثی (neutral-t1-fg1-disable) نمایش داده میشود. |
| Loading | اسکلتون دایرهای با انیمیشن تا زمان دریافت داده رندر میشود. |
پلت رنگی و تخصیص دادهها
رنگبندی تکههای چارت بر اساس استانداردهایی دسترسیپذیری بر به ترتیب و به شکل خودکار انتخاب خواهد شد.
راهنمای استفاده
بایدها
- محدودیت تعداد قطعات: بهتر است حداکثر از ۵ تا ۷ سگمنت در یک نمودار استفاده کنید. اگر تعداد دستهها بیشتر است، مقادیر کوچکتر را در یک دسته ترکیبی به نام "سایر" (Others) ادغام کنید.
- مرتبسازی دادهها: سگمنتها را از بزرگترین مقدار به کوچکترین مقدار (در جهت عقربههای ساعت) مرتب کنید تا خوانایی دادهها آسانتر شود.
نبایدها
- از افکتهای سهبعدی (3D)، سایههای سنگین یا گرادینتهای تند روی قطعات نمودار استفاده نکنید.
- از قرار دادن متون طولانی در داخل اسلات مرکز خودداری کنید، اسلات مرکز فقط جایگاه اعداد کلیدی و کلمات بسیار کوتاه است.
دسترسیپذیری
تفاوت با الگوی رنگی (Color Blindness): رنگهای چارت بر اساس استانداردهای دسترسیپذیری به ترتیبی چیده شدهاند که در تایپهای مختلف نمایش درستی داشته باشند اما صرفا به رنگها برای انتقال معنا اتکا نکنید، حتما مقادیر عددی را در Tooltip و Legend درج کنید.