Google charts

从简单的折线图到复杂的分层树状图，Google 图表库提供了大量随时可用的图表类型：

  • Scatter Chart
  • Line Chart
  • Bar / Column Chart
  • Area Chart
  • Pie Chart
  • Donut Chart
  • Org Chart
  • Map / Geo Chart

Kowa ce Google Chart?

Ina da ke aiki na kiyashi Google Chart, kaRaba hannun yantaiya ga loaderin shakara:

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

Google chart ya dace a amfani

Kanannan abin da kawai yana da <div> Element ya iya zana shakara:

<div id="myChart" style="max-width:700px; height:400px"></div>

Element na <div> ya da da ID na yankin

Kuma yanci a yadda Google Graph API:

  1. Yanci a yadda Visualization API da corechart
  2. Duba abuwar tattabiyar aya, kuma a kada ke kammala API
1 google.charts.load('current',{packages:['corechart']});
2 google.charts.setOnLoadCallback(drawChart);

Like that!]}

Line Chart

Source Code

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 Price vs. Area',
  hAxis: {title: 'Square Meters'},
  vAxis: {title: 'Price in Million'},
  legend: 'none'
};
// Draw Chart
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
chart.draw(data, options);
}

Taimakarar kai amfani

Scatter Plot

data yang sama kainya tsa yiya:Scatter Plot, kainya tsa: google.visualization ganti: ScatterChart:

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

Taimakarar kai amfani

Bar Chart

Source Code

function drawChart() {
var data = google.visualization.arrayToDataTable([
  ['Contry', 'Mhl'],
  ['Italy', 55],
  ['France', 49],
  ['Spain', 44],
  ['United States', 24],
  ['Argentina', 15]
]);
var options = {
  title: 'Global Wine Production'
};
var chart = new google.visualization.BarChart(document.getElementById('myChart'));
chart.draw(data, options);
}

Taimakarar kai amfani

cece cece

A tsa yiya bar chart cece cece, kainya tsa:cece cecekainya tsa:

google.visualization.PieChart

wakil:

google.visualization.BarChart

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

Taimakarar kai amfani

3D cece cece

A tsa yiya 3D fassara cece cece, kainya kama tsa: is3D: true Add to options:

var options = {
  title: 'Global wine production',
  is3D: true
};

Taimakarar kai amfani