إليك بعض الأمثلة على مكتبات الرسوم البيانية React مع الميزات والأمثلة الخاصة بها:
1. رد الفعل Chartjs 2
- الميزات: أنواع مختلفة من المخططات مثل الخط والشريط والدائري والمزيد.- أمثلة:
- مخطط شريطي عمودي
- مخطط شريطي أفقي
- مخطط شريطي مكدس
- مخطط شريطي مجمع
- مخطط المنطقة
- الرسم البياني الخطي
- مخطط خطي متعدد المحاور
- رسم بياني دائري
- مخطط دونات
- مخطط المنطقة القطبية
- مخطط الرادار
- مخطط مبعثر
- مخطط الفقاعة
- مخطط متعدد الأنواع
- أحداث الرسم البياني
- المرجع الرسم البياني
- مخطط التدرج
2. تفاعل مع مخططات جوجل
- الميزات: أنواع مختلفة من المخططات مثل المنطقة والشريط والفقاعة والمزيد.- أمثلة:
- مخطط المنطقة
- الرسم البياني الشريطي
- مخطط الفقاعة
- تقويم
- مخطط الشمعدان
- مخطط العمود
- مخطط التحرير والسرد
- جانت
- كَيّل
- الرسم البياني الجغرافي
- الرسم البياني
- الرسم البياني الخطي
- المخطط التنظيمي
- رسم بياني دائري
- سانكي
- مخطط مبعثر
- مخطط المنطقة المتدرج
- طاولة
- الجدول الزمني
- خريطة الشجرة
- شجرة الكلمات
- صور متحركة
- محرر الرسم البياني
- الضوابط
- التفاعلات
- تَخطِيط
- جدول البيانات
- شريط الأدوات
3. ApexCharts.js
- الميزات: أنواع مختلفة من المخططات مثل الخط والعمود والشريط والدائري والمزيد.- الأمثلة: تتضمن الكود المصدري لجميع الأمثلة لتوفير وقت التطوير.
4. CanvasJS
- الميزات: مخططات تفاعلية وسريعة الاستجابة مع الرسوم المتحركة والتكبير/التصغير والتحريك والأحداث والتصدير والتنقل والتحديثات في الوقت الفعلي.- أمثلة:
- الرسوم البيانية الخطية
- المخططات الخطية والخطية
- الرسوم البيانية للمنطقة
- منطقة الخط، والمنطقة المكدسة، والمنطقة المكدسة 100، ومنطقة الخطوة، ومنطقة النطاق، ومخططات منطقة نطاق النطاق
- المخططات العمودية
- الرسوم البيانية الشريطية
- عمود مكدس، عمود مكدس 100%، عمود النطاق، شريط مكدس، شريط مكدس 100%، شريط النطاق، والرسوم البيانية الانحدارية
- المخططات الدائرية
- دونات / دونات المخططات
- المخططات القمعية والهرمية
- الشموع اليابانية والرسوم البيانية OHLC
- المخططات المبعثرة والفقاعية
- مخططات الصندوق والشارب
- مخططات خط الخطأ والخطأ
- الرسوم البيانية الديناميكية
- مخططات الأسهم مع محدد النطاق، والمستكشف، والرسوم البيانية المتعددة
5.TanStack/react-charts
- الميزات: أنواع مختلفة من المخططات مثل الخط والشريط والفقاعة والمزيد.- أمثلة: تتضمن أمثلة للأنماط البسيطة والخطية والشريطية والفقاعية والمنطقة والأنماط المخصصة وتلميحات الأدوات المخصصة وخيارات المحور والوضع الداكن والتألق والفرشاة وأوضاع التجميع وخيارات تلميحات الأدوات والمزيد.
توفر هذه المكتبات أمثلة وقوالب شاملة لمساعدتك على البدء في إنشاء المخططات في تطبيق React الخاص بك. يمكنك اختيار المخطط الذي يناسب احتياجاتك على أفضل وجه بناءً على أنواع المخططات التي ترغب في إنشائها ومستوى التخصيص الذي تحتاجه[1] [2] [3] [4] [5].
الاستشهادات:[1] https://react-chartjs-2.js.org/examples/
[2] https://www.react-google-charts.com/examples
[3] https://apexcharts.com/react-chart-demos/
[4] https://canvasjs.com/react-charts/
[5] https://codesandbox.io/examples/package/react-charts