مرجع
المخططات والجداول
اختر مكتبة مخططات ومكتبة جداول لمسوداتك، واطلب المخطط أو الجدول الذي تريده بإشارات @chart و@table.
اختر مكتبة للمخططات وأخرى للجداول تناسبان نظام التصميم، فيُبنى بهما كل مخطط وجدول بيانات في مسوداتك. اختر المخططات والجداول بجانب قائمة نظام التصميم، ثم اختر مكتبة من كل نوع، أو حزمة npm مخصصة… لأي مكتبة أخرى.
اختر مكتباتك
| المكتبة | الاستخدام | الحزم |
|---|---|---|
| Recharts | المخططات | recharts@3 |
| Apache ECharts | المخططات | echarts@6, echarts-for-react@3 |
| Chart.js | المخططات | chart.js@4, react-chartjs-2@5 |
| Victory | المخططات | victory@37 |
| MUI X Charts | المخططات | @mui/x-charts@9 |
| TanStack Table | الجداول | @tanstack/react-table@8, @tanstack/react-virtual@3 |
| AG Grid | الجداول | ag-grid-community@36, ag-grid-react@36 |
| MUI X Data Grid | الجداول | @mui/x-data-grid@9 |
| React Data Grid | الجداول | react-data-grid@7 (تجريبي) |
يُحفظ اختيارك مع كل نموذج أولي وينتقل معه إلى عمليات التصدير. ولا يؤدي تغييره إلى بدء جلسة جديدة، لذا يمكنك إضافة مكتبة مخططات في منتصف العمل. ويتحقق Vibr من الحزمة المخصصة على npm قبل البناء، كما يفعل مع نظام التصميم المخصص.
أشِر إلى مخطط أو جدول
ثم اطلب ما تريد بإشارة. اكتب @ ثم chart/ أو table/ لعرضها كلها:
- المخططات:
@chart/bar،@chart/stacked-bar،@chart/horizontal-bar،@chart/line،@chart/area،@chart/stacked-area،@chart/pie،@chart/donut،@chart/scatter،@chart/radar،@chart/heatmap،@chart/treemap،@chart/funnel،@chart/gauge،@chart/sparklineو@chart/combo(أعمدة وخط). - الجداول:
@table/sortable،@table/filterable،@table/paginated،@table/selectable،@table/editable،@table/grouped،@table/expandable،@table/pinned(رأس وعمود أول ثابتان)،@table/virtualized(آلاف الصفوف) و@table/resizable. ويمكنك الإشارة إلى عدة ميزات لجدول واحد:@table/sortable @table/paginated.
تخبر كل إشارة النموذج بالأجزاء التي يبني بها ذلك المخطط أو الجدول من مكتبتك. وإذا لم تتضمنه المكتبة، مثل الخريطة الحرارية في Recharts، أو تجميع الصفوف في الإصدار المجاني من AG Grid، يبنيه النموذج بطريقة أخرى وبالنمط نفسه.
طابِق تصميمك
لتطابق تصميمك، أشر إلى سمة ألوان في الطلب نفسه: تأخذ المخططات والجداول ألوانها وخطوطها في الوضعين الفاتح والداكن، وتأخذ الجداول أيضًا نصف قطر الزوايا والتباعد. وإذا لم تختر مكتبة، تُرسم المخططات يدويًا بصيغة SVG وتستخدم الجداول جداول نظام التصميم نفسه.