గూగుల్ చార్ట్స్

సాధారణ లైన్ చార్ట్ నుండి కంప్లెక్షన్ చేసిన లేవన్ ట్రీ చార్ట్ వరకు, Google చార్ట్ లైబ్రరీ అనేక ఉపయోగించగలిగే చార్ట్ రకాలను అందిస్తుంది:

  • స్కాటర్ చార్ట్
  • లైన్ చార్ట్
  • బార్ / కలమ్ చార్ట్
  • ఏరియా చార్ట్
  • పీ చార్ట్
  • డౌన్న్ చార్ట్
  • ఆర్గనైజేషన్ చార్ట్
  • మ్యాప్ / జియో చార్ట్

గూగల్ చార్ట్స్ ఎలా ఉపయోగించాలి?

మీరు గూగల్ చార్ట్స్ ఉపయోగించడానికి అవసరమైన పేజీలో ఉపయోగించండిచిత్రాన్ని లోడ్ చేసే లింకును జోడించండి:

<script
src="https://www.gstatic.com/charts/loader.js">
</script>

గూగల్ చార్ట్స్ ఉపయోగించడం సులభం

ఒక మాత్రమే జోడించండి <div> ఎలమెంట్ చిత్రాన్ని ప్రదర్శించడానికి ఉపయోగించండి:

<div id="myChart" style="max-width:700px; height:400px"></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
};

亲自试一试