📋 محتويات الصفحة
📖 الوصف
ApexCharts هي مكتبة رسوم بيانية حديثة وقوية تقدم تصاميم جميلة وتفاعلات سلسة. تتميز بـ 15+ نوع رسم بياني مع animations مدمجة، و دعم real-time data updates. متاحة لـ Vanilla JS, React, Vue, Angular, و WebComponents. تعتبر الخيار الأفضل للرسوم البيانية التفاعلية الحديثة بدون الحاجة لـ D3. تتميز بواجهة...
🎯 يستخدم في
مجالات استخدام هذه الأداة
Dashboards حديثة
تطبيقات المراقبة (Monitoring)
تقارير المبيعات
Crypto/Stock charts
Real-time data displays
✨ المميزات
أبرز مميزات هذه الأداة
15+ نوع رسم بياني
تفاعلي مع animations سلسة
Framework agnostic (React
Vue
Angular
JS)
Real-time data streaming
Responsive charts
Zoom
Pan
Brush
Selection
Annotations & Markers
Multilingual (RTL support)
Download charts (PNG
SVG
CSV)
Touch-friendly
Dark mode support
⚠️ العيوب
نقاط يجب مراعاتها
مجتمع أصغر من Chart.js / ECharts
Performance مع بيانات ضخمة (>50k points)
بعض الميزات مدفوعة (ApexCharts Pro)
Bundle size ~180KB gzipped
Documentation أقل شمولية
🔄 البدائل
أدوات بديلة يمكنك استخدامها
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
<!DOCTYPE html>
<html dir="rtl">
<head>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</head>
<body>
<div id="chart"></div>
<script>
const options = {
series: [{
name: 'المبيعات',
data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
}, {
name: 'الإيرادات',
data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
}],
chart: {
type: 'bar',
height: 350,
toolbar: { show: true }
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '55%',
borderRadius: 4
}
},
dataLabels: { enabled: false },
stroke: { show: true, width: 2, colors: ['transparent'] },
xaxis: {
categories: ['فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو', 'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر']
},
yaxis: {
title: { text: 'ر.س (آلاف)' }
},
fill: { opacity: 1 },
tooltip: {
y: { formatter: val => `${val} ألف` },
rtl: true
}
};
const chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();
</script>
</body>
</html>📚 أدوات أخرى في Charts
قد يعجبك أيضاً
Chart.js
⭐مكتبة رسوم بيانية JavaScript بسيطة وخفيفة (Simple yet Flexible JS Charts)
D3
⭐مكتبة معالجة البيانات وتصويرها منخفضة المستوى (Low-Level Data Visualization Library)
ECharts
⭐مكتبة رسوم بيانية JavaScript مفتوحة المصدر قوية (Powerful Interactive Charting Library)
Highcharts
⭐مكتبة رسوم بيانية JavaScript احترافية (Professional JavaScript Charts)
Nivo
⭐مكتبة رسوم بيانية React غنية بمكونات declarative (Rich Declarative Data Visualization)
Plotly
⭐مكتبة رسوم بيانية علمية متقدمة (Scientific & Advanced Charts)