المخطط الدائري المجوَّف
المخطط الدائري المجوَّف shows proportional data in a ring layout with multiple panel types for labeled, stacked, and inline progress visualizations.
Loading demo: donut-chart-real-world
التثبيت
npx sdaia-ui@latest add donut-chart
الاستخدام
import { DonutChart } from "@/components/ui/donut-chart"<DonutChart type="labeled-ring" />الأمثلة
حلقة موسومة
مخطط دونات مع تسميات حول كل شريحة.
Loading demo: donut-chart-labeled-ring
المقياس Ring Panel
مخطط دونات مع مقياس مركزي يُعرض داخل الحلقة.
Loading demo: donut-chart-metric-ring-panel
Extended المقياس Panel
مخطط دونات مع لوحة موسّعة تعرض مقاييس إضافية.
Loading demo: donut-chart-extended-metric-panel
مرجع الواجهة البرمجية
DonutChartProps
خصائص مكوّن DonutChart.
Prop | Type | Default | Required |
|---|---|---|---|
variant | 'Color Border' | 'Color Filled' | 'Color Border' | optional |
pie | boolean | false | optional |
percentage | number | 50 | optional |
slices | 2 | 3 | 4 | 5 | 6 | 3 | optional |
sliceData | DonutChartSliceData[] | - | optional |
helperText | string | 'Text' | optional |
label | string | - | optional |
size | number | 176 | optional |
segmentGap | number | 3 | optional |
rtl | boolean | false | optional |
series | DonutChartSeriesItem[] | — | optional |