گوگل چارٹس

از نمودار خطی ساده تا نمودار درخت طبقاتی پیچیده، کتابخانه نمودارهای 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> باید یک شناسه منحصر به فرد داشته باشد.

سپس 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([
  ['کنٹری', '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.بار چارٹ

var chart = new google.visualization.PieChart(document.getElementById('myChart'));

خود کا تجربہ کریئن

3D چکر چارٹ

اگر آپ چکر چارٹ کو 3D فارم میں دکھانے چاہتے ہیں تو صرف is3D: true اوپشنوں میں شامل کریئن:

var options = {
  title: 'عالمی وین پیداواریت',
  is3D: true
};

خود کا تجربہ کریئن