📋 محتويات الصفحة
📖 الوصف
Chart.js هي واحدة من أشهر مكتبات الرسوم البيانية JavaScript، مع أكثر من 60,000 نجمة على GitHub. تقدم 8 أنواع رسوم بيانية بسيطة وجميلة مع declarative API سهلة. تتميز بـ Canvas-based rendering، مما يعطي أداء سريع وتصاميم نظيفة. متوفرة لـ React, Vue, Angular, Vanilla JS، ومجانية تماماً. تعتبر الخيار ا...
🎯 يستخدم في
مجالات استخدام هذه الأداة
Dashboard بسيط
تقارير البيانات
Visualization للويب
MVP & prototypes
Blogs & articles
✨ المميزات
أبرز مميزات هذه الأداة
سهلة التعلم والبدء
8 أنواع رسوم بيانية أساسية
Canvas-based (أداء سريع)
Responsive & Resizable
Lightweight (~60KB gzipped)
Declarative configuration
Active community (65k+ stars)
Framework agnostic
Free & Open source (MIT)
Plugin ecosystem غني
Animations سلسة
⚠️ العيوب
نقاط يجب مراعاتها
8 أنواع فقط (محدودة)
Canvas-based (صعب تخصيص SVG-level)
Performance مع 10k+ points محدود
Customization محدود للبيانات المعقدة
No 3D support
No Maps
Less flexible than D3/ECharts
Not ideal for big data
🔄 البدائل
أدوات بديلة يمكنك استخدامها
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
<canvas id="myChart" width="400" height="400"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// خطي
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو'],
datasets: [{
label: 'المبيعات',
data: [65, 59, 80, 81, 56, 55],
borderColor: 'rgb(75, 192, 192)',
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderWidth: 2,
tension: 0.3,
fill: true
}]
},
options: {
responsive: true,
plugins: {
legend: { position: 'top' },
title: { display: true, text: 'مبيعات الشهر' }
},
scales: {
y: { beginAtZero: true }
}
}
});
// Doughnut chart
new Chart(document.getElementById('doughnut'), {
type: 'doughnut',
data: {
labels: ['منتج أ', 'منتج ب', 'منتج ج'],
datasets: [{
data: [300, 50, 100],
backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
}]
}
});
// تحديث ديناميكي
setInterval(() => {
myChart.data.datasets[0].data.push(Math.random() * 100);
myChart.update();
}, 2000);
</script>📚 أدوات أخرى في Charts
قد يعجبك أيضاً
ApexCharts
⭐مكتبة رسوم بيانية JavaScript تفاعلية حديثة (Modern Interactive 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)