مخططات قوقل
من الرسم البياني الخطي البسيط إلى الشجرة التدرجية المعقدة، مكتبة Google Charts توفر مجموعة متنوعة من أنواع الرسوم البيانية المتاحة على الفور:
- الرسم البياني النقطي (Scatter Chart)
- الرسم البياني الخطي (Line Chart)
- الرسم البياني الخطي/العمودي (Bar / Column Chart)
- الرسم البياني بالمنطقة (Area Chart)
- الرسم البياني الدائري (Pie Chart)
- الرسم البياني الشبه دائري (Donut Chart)
- شجرة التنظيم (Org Chart)
- الخرائط/الرسوم الجغرافية (Map / Geo Chart)
كيفية استخدام Google Chart؟
إذا كنت بحاجة إلى استخدام Google Chart في صفحة الويب الخاصة بك، يرجىإضافة رابط إلى محميل الرسوم البيانية:
<script src="https://www.gstatic.com/charts/loader.js"> </script>
يعد Google Charts سهل الاستخدام.
فقط أضف <div> العنصر يمكنه عرض الرسوم البيانية:
<div id="myChart" style="max-width:700px; height:400px"></div>
عنصر <div> يجب أن يكون له معرف فريد.
ثم تحميل API Google Graph:
- تحميل API للتحليل المرئي و حزمة corechart
- إعداد دالة استدعاء مرة واحدة، عند إكمال تحميل API
1 google.charts.load('current',{packages:['corechart']});
2 google.charts.setOnLoadCallback(drawChart);
بهذا كل شيء!
رسم بياني خطي
كود المصدر
function drawChart() {
// تعيين البيانات
var data = google.visualization.arrayToDataTable([
['السعر', 'الحجم'],
[50,7],[60,8],[70,8],[80,9],[90,9],[100,9],
[110,10],[120,11],[130,14],[140,14],[150,15]
]);
// تعيين الخيارات
var options = {
title: 'سعر العقار و مساحة العقار',
hAxis: {title: 'متر مربع'},
vAxis: {title: 'سعر المليون'},
legend: 'none'
};
// رسم الرسم البياني
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
chart.draw(data, options);
}
رسم بياني نقطي
باستخدام نفس البيانات لإنشاءرسم بياني نقطي، يرجى تغيير google.visualization غيرها ScatterChart:
var chart = new google.visualization.ScatterChart(document.getElementById('myChart'));
رسم بياني خطي
كود المصدر
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Contry', 'Mhl'],
['إيطاليا', 55],
['فرنسا', 49],
['إسبانيا', 44],
['الولايات المتحدة', 24],
['الأرجنتين', 15]
]);
var options = {
title: 'إنتاج النبيذ العالمي'
};
var chart = new google.visualization.BarChart(document.getElementById('myChart'));
chart.draw(data, options);
}
خريطة بيانية
لتحويل الرسم البياني الخطي إلىخريطة بيانية، باستخدام فقط:
google.visualization.PieChart
استبدال:
google.visualization.BarChart
var chart = new google.visualization.PieChart(document.getElementById('myChart'));
خريطة بيانية ثلاثية الأبعاد
لعرض شريحة الخرائط البيانية ثلاثية الأبعاد، يكفي فقط is3D: true أضف إلى الخيارات:}}
var options = {
title: 'إنتاج النبيذ العالمي',
is3D: true
};
