Chakula cha Google

Kuanzia chart ya折线图 ya muhimu hadi chart ya mabonde ya kilele, Google chart library ina kina kubwa ya aina za chart ambazo zinahusishwa kwa sababu ya kina.

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

Kikeleza Google Chart?

Iwapo unataka kutumia Google Chart kwenye ukurasa wako, tunapendeleza...Ongeza kiungo kwa mchakato wa kusoma chart.:

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

Google chart inapendekeza sana.

Inafaa kuongeza kumi moja tu. <div> Kitu hiki kinaweza kuonyesha chart:

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

Kitu cha <div> lazima kumiliki ID pekee.

Kisha kuimba Google Graph API:

  1. Kuimba Visualization API na pake ya corechart.
  2. Mwambia kifunze kama msingi wa kusoma, kwa sababu inatokana na API inayoshinda kutumika.
1 google.charts.load('current',{packages:['corechart']});
2 google.charts.setOnLoadCallback(drawChart);

Kama hivi!

Chart ya kifungu cha uwanja

Makina ya mawasiliano

function drawChart() {
// Kufanya 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]
  ]);
// Kufanyia mawasiliano
var options = {
  title: 'Kiasi cha uchaguzi na eneo la nyumba',
  hAxis: {title: 'Maua ya eneo'},
  vAxis: {title: 'Suruhi ya milioni'},
  legend: 'none'
};
// Kufanya mawasiliano
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
chart.draw(data, options);
}

Jifunze kwa Kupendeza

Chart ya matokeo ya kawaida

data zilizohusiana kama:Chart ya matokeo ya kawaida, tukisoma: google.visualization badilisha na ScatterChart:

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

Jifunze kwa Kupendeza

BarChart

Makina ya mawasiliano

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

Jifunze kwa Kupendeza

Picha ya kifungu

Kamaanisha uoneza kifungu cha bar cha kila sikuPicha ya kifungukwa sababu tuona:

google.visualization.PieChart

Badilisha:

google.visualization.BarChart

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

Jifunze kwa Kupendeza

Picha ya kifungu ya 3D

Kamaanisha uoneza kusoma picha ya kifungu kwa muundo wa 3D, bila kumwambia is3D: true ongezewa kwenye chocho: }}

var options = {
  title: 'Uchaguzi wa Vinywani wa Dunia',
  is3D: true
};

Jifunze kwa Kupendeza