نمودارهای گوگل

از نمودار خطی ساده تا نمودار درختی چندلایه پیچیده، کتابخانه نمودارهای Google نمونه‌های زیادی از نمودارهای آماده‌ی استفاده ارائه می‌دهد:

  • نمودار نقطه‌ای (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> باید یک ID منحصر به فرد داشته باشد.

سپس Google Graph API را بارگذاری کنید:

  1. بارگذاری Visualization API و بسته corechart
  2. یک تابع بازگشتی تنظیم کنید، که پس از بارگذاری 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'));

آزمایش کنید

کیک‌چارت 3D

برای نمایش کیک‌چارت به صورت 3D، تنها باید is3D: true افزودن به گزینه‌ها:

var options = {
  title: 'تولید شراب جهان',
  is3D: true
};

آزمایش کنید