مخطّطات
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" باسم متاح وجدول بيانات مخفي بصريًا، فيحصل مستخدم قارئ الشاشة على القيم الفعلية.
تأتي الألوان من مقياس الهيئة الفئوي، وتستخدم مفاتيح الرسم تسميات نصّية لا اللون وحده. تتبع المحاور والتسميات اتجاه الصفحة في العربية.