مخطط Google
من المخططات الخطية البسيطة إلى الخرائط المتسلسلة الهرمية المعقدة ، يوفر معرض مخططات Google عددًا كبيرًا من أنواع المخططات الجاهزة للاستخدام:
- مخطط مبعثر
- خط الرسم البياني
- مخطط شريطي / عمودي
- مخطط المنطقة
- مخطط دائري
- مخطط دائري
- المخطط الهيكلي
- خريطة / مخطط جغرافي
كيفية استخدام مخطط جوجل؟
لاستخدام مخطط Google في صفحة الويب الخاصة بك ، قم بإضافة ارتباط إلى أداة تحميل الرسوم البيانية:
<script
src="https://www.gstatic.com/charts/loader.js">
</script>
مخطط Google سهل الاستخدام.
فقط أضف عنصر <div> لعرض الرسم البياني:
<div id="myChart" style="max-width:700px; height:400px"></div>
يجب أن يكون للعنصر <div> معرف فريد.
ثم قم بتحميل Google Graph API:
- قم بتحميل Visualization API وحزمة Corechart
- قم بتعيين وظيفة رد اتصال للاتصال عند تحميل واجهة برمجة التطبيقات
1 google.charts.load('current',{packages:['corechart']});
2 google.charts.setOnLoadCallback(drawChart);
هذا كل شئ!
خط الرسم البياني
مصدر الرمز
function drawChart() {
// Set Data
var data = google.visualization.arrayToDataTable([
['Price', 'Size'],
[50,7],[60,8],[70,8],[80,9],[90,9],[100,9],
[110,10],[120,11],[130,14],[140,14],[150,15]
]);
// Set Options
var options = {
title: 'House Prices vs Size',
hAxis: {title: 'Square Meters'},
vAxis: {title: 'Price in Millions'},
legend: 'none'
};
// Draw Chart
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
chart.draw(data, options);
}
المؤامرات المبعثرة
لتشتت نفس البيانات ، قم بتغيير google.visualization إلى LineChart :
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
المخططات الشريطية
مصدر الرمز
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Contry', 'Mhl'],
['Italy', 55],
['France', 49],
['Spain', 44],
['USA', 24],
['Argentina', 15]
]);
var options = {
title: 'World Wide Wine Production'
};
var chart = new google.visualization.BarChart(document.getElementById('myChart'));
chart.draw(data, options);
}
الرسوم البيانية الدائرية
لتحويل مخطط شريطي إلى مخطط دائري ، ما عليك سوى استبدال:
google.visualization. BarChart
مع:
google.visualization. مخطط دائري
var chart = new google.visualization.PieChart(document.getElementById('myChart'));
3D فطيرة
لعرض الدائرة ثلاثية الأبعاد ، ما عليك سوى إضافة is3D: صحيح بالنسبة إلى الخيارات:
var options = {
title: 'World Wide Wine Production',
is3D: true
};