نمودارهای گوگل
از یک نمودار خطی ساده تا یک نمودار درختی چندلایه پیچیده، کتابخانه نمودارهای گوگل انواع زیادی از نمودارهای آماده‌برای استفاده ارائه می‌دهد:
- نمودار پراکندگی (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>
نمودارهای گوگل ساده و قابل استفاده هستند.
تنها نیاز به اضافه کردن یک <div> عنصر می‌تواند نمودار را نمایش دهد:
<div id="myChart" style="max-width:700px; height:400px"></div>
عنصر <div> باید یک شناسه منحصر به فرد داشته باشد.
سپس Google Graph API را بارگذاری کنید:
- Visualization 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],
]
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'));
کیک 3D
برای نمایش کیک 3D، کافی است که is3D: true افزودن به گزینه‌ها: }}
var options = {
title: 'تولید شراب در جهان',
is3D: true
};
