مخططات
Chartsمخططات بيانية SVG في React بلا اعتماديات، تستخدم لوحة ألوان الهيئة الفئوية: BarChart، LineChart، وPieChart. لكل مخطط جدول بديل متاح الوصول ودعم للاتجاه العربي.
تتشارك المخططات الثلاثة واجهة واحدة: مرر data للمخطط الدائري، أو series مع categories لمخطط الأعمدة والخطوط. يعرض كل مخطط جدول بيانات بديلاً لتسهيل الوصول.
متى تستخدمه
استخدم BarChart لمقارنة الفئات، LineChart لتتبع التغير عبر الزمن، وPieChart لعرض حصص قليلة من مجموع واحد. مرر series وcategories لمخطط الأعمدة والخطوط، أو data للمخطط الدائري.
أبق عدد السلاسل قليلاً لتبقى الألوان الفئوية متمايزة. لرقم رئيسي واحد، استخدم Metric.
أمثلة
الخصائص
الخصائص التي يعرفها Charts. سمات العنصر الأصلي تمر كما هي.
<BarChart>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
palette | Palette | Colour set: DGA categorical (default) or the monochrome brand-green sequence. | |
legend | boolean | true | Show the legend. |
title | string | Accessible name for the chart (also the data-table caption). | |
seriesإلزامي | ChartSeries[] | ||
categoriesإلزامي | string[] | ||
xAxisLabel | string | X-axis title. | |
yAxisLabel | string | Y-axis title (rotated). | |
yMax | number | Force the Y-axis maximum (default: auto, rounded to a nice value). | |
width | number | viewBox width / height. Charts scale responsively to their container. | |
height | number | ||
stacked | boolean | Stack series into one column per category (default). false groups them side by side. |
<LineChart>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
palette | Palette | Colour set: DGA categorical (default) or the monochrome brand-green sequence. | |
legend | boolean | true | Show the legend. |
title | string | Accessible name for the chart (also the data-table caption). | |
seriesإلزامي | ChartSeries[] | ||
categoriesإلزامي | string[] | ||
xAxisLabel | string | X-axis title. | |
yAxisLabel | string | Y-axis title (rotated). | |
yMax | number | Force the Y-axis maximum (default: auto, rounded to a nice value). | |
width | number | viewBox width / height. Charts scale responsively to their container. | |
height | number | ||
area | boolean | true | Draw a soft area gradient under each line. |
curve | "linear" | "smooth" | A smooth Catmull-Rom curve (SDGA "Gradual" default) or straight segments. |
<PieChart>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
palette | Palette | Colour set: DGA categorical (default) or the monochrome brand-green sequence. | |
legend | boolean | true | Show the legend. |
title | string | Accessible name for the chart (also the data-table caption). | |
dataإلزامي | ChartSlice[] | ||
donut | boolean | Render a donut (50% hole) instead of a full pie. | |
size | number | 240 | Disk diameter in px. |
إمكانية الوصول
يعرض كل مخطط role="img" مع اسم متاح الوصول وجدول بيانات مخفي بصرياً، مما يتيح لمستخدمي قارئات الشاشة الوصول إلى القيم الفعلية.
تأتي الألوان من مقياس الهيئة الفئوي، وتستخدم مفاتيح المخطط تسميات نصية إلى جانب اللون. تتبع المحاور والتسميات اتجاه الصفحة في العربية.