### مقدمة إلى Google Charts في JavaScript
Google Charts هي مكتبة قوية ومجانية تقدمها جوجل لإنشاء الرسوم البيانية التفاعلية والمرنة باستخدام JavaScript. تتيح لك هذه المكتبة عرض البيانات بشكل مرئي على موقع الويب الخاص بك، مما يساعد المستخدمين على فهم البيانات بسهولة أكبر. في هذا المقال، سنقوم بشرح كيفية استخدام Google Charts في JavaScript مع تقديم أمثلة متعددة.
### إعداد Google Charts
لبدء استخدام Google Charts، يجب أولاً تحميل المكتبة في الصفحة التي تعمل عليها. يمكنك القيام بذلك عن طريق إضافة الكود التالي في قسم “ من ملف HTML الخاص بك:
“`html
“`
### رسم أول مخطط بياني
لنبدأ برسم مخطط بياني بسيط مثل مخطط الأعمدة (Bar Chart). سنقوم بإنشاء بيانات بسيطة ومن ثم عرضها.
#### الخطوات:
1. **تحميل المكتبة**: قم بتحميل المكتبة وتحديد الحزمة التي ترغب باستخدامها (مثل `corechart`).
2. **إعداد البيانات**: قم بتحديد البيانات التي ترغب في عرضها.
3. **تحديد الخيارات**: حدد خيارات لتخصيص المخطط الخاص بك.
4. **رسم المخطط**: استخدم البيانات والخيارات لرسم المخطط.
#### مثال:
“`html
// تحميل مكتبة الرسم البياني وتحديد الحزمة
google.charts.load(‘current’, {‘packages’:[‘corechart’]});
// استدعاء الدالة لتجهيز الرسم البياني
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
// إعداد البيانات
var data = google.visualization.arrayToDataTable([
[‘السنة’, ‘المبيعات’],
[‘2019’, 1000],
[‘2020’, 1170],
[‘2021’, 660],
[‘2022’, 1030]
]);
// تحديد الخيارات
var options = {
title: ‘أداء المبيعات [شركة برمجة مصرية] السنوي’,
hAxis: {title: ‘السنة’, titleTextStyle: {color: ‘#333’}},
vAxis: {minValue: 0}
};
// رسم المخطط
var chart = new google.visualization.BarChart(document.getElementById(‘chart_div’));
chart.draw(data, options);
}
“`
### أمثلة متعددة
#### 1. مخطط دائري (Pie Chart)
يمكنك أيضًا إنشاء مخطط دائري لتمثيل البيانات النسبية. إليك مثال على كيفية القيام بذلك:
“`html
google.charts.load(‘current’, {‘packages’:[‘corechart’]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
[‘مهمة’, ‘ساعات في اليوم’],
[‘عمل’, 8],
[‘نوم’, 8],
[‘ترفيه’, 2],
[‘طعام’, 2],
[‘أخرى’, 4]
]);
var options = {
title: ‘توزيع الوقت اليومي’
};
var chart = new google.visualization.PieChart(document.getElementById(‘piechart’));
chart.draw(data, options);
}
“`
#### 2. مخطط خطي (Line Chart)
لنقم بإنشاء مخطط خطي لعرض البيانات الزمنية بشكل مرئي.
“`html
google.charts.load(‘current’, {‘packages’:[‘corechart’]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
[‘الشهر’, ‘الأرباح’],
[‘يناير’, 1000],
[‘فبراير’, 1170],
[‘مارس’, 660],
[‘أبريل’, 1030]
]);
var options = {
title: ‘الأرباح الشهرية’,
curveType: ‘function’,
legend: { position: ‘bottom’ }
};
var chart = new google.visualization.LineChart(document.getElementById(‘curve_chart’));
chart.draw(data, options);
}
“`
### الخاتمة
تعتبر Google Charts أداة مرنة وقوية لإنشاء مجموعة متنوعة من الرسوم البيانية باستخدام JavaScript. من [شركة برمجة مصرية] خلال استخدامها، يمكن للمطورين تقديم البيانات بشكل تفاعلي وجذاب للمستخدمين. مع توفر العديد من أنواع الرسوم البيانية مثل المخططات البيانية العمودية والخطية والدائرية، يمكنك اختيار النوع الذي يناسب احتياجاتك بشكل أفضل.