Google-Charts

Von einfachen Liniendiagrammen bis zu komplexen Schichtenbaumdiagrammen bietet die Google Charts-Bibliothek eine Vielzahl von sofort verfügbaren Diagrammtypen:

  • Streudiagramm (Scatter Chart)
  • Liniendiagramm (Line Chart)
  • Balken-/Spaltendiagramm (Bar / Column Chart)
  • Flächen-Diagramm (Area Chart)
  • Kuchen-Diagramm (Pie Chart)
  • Donut-Diagramm (Donut Chart)
  • Organisationsstrukturdiagramm (Org Chart)
  • Karte/Geochart (Map / Geo Chart)

Wie verwendet man Google Chart?

Wenn Sie Google Chart auf Ihrer Webseite verwenden möchten, bitteFügen Sie einen Link zum Diagrammlader hinzu:

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

Google Charts sind einfach zu bedienen.

Fügen Sie einfach eine <div> Das Element kann den Diagramm anzeigen:

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

Das <div>-Element muss einen eindeutigen ID haben.

Laden Sie dann die Google Graph API:

  1. Laden Sie das Visualization API und das corechart-Paket
  2. Definieren Sie eine Rückruffunktion, die nach dem Laden der API aufgerufen wird
1 google.charts.load('current',{packages:['corechart']});
2 google.charts.setOnLoadCallback(drawChart);

und das ist's!}

Verlaufsdiagramm

Quellcode

function drawChart() {
// Daten setzen
var data = google.visualization.arrayToDataTable([
  ['Preis', 'Größe'],
  [50,7],[60,8],[70,8],[80,9],[90,9],[100,9],
  [110,10],[120,11],[130,14],[140,14],[150,15]
  ]
// Optionen setzen
Fügen Sie zu den Optionen hinzu: }}
  title: 'Hauspreise und Hausfläche',
  hAxis: {title: 'Quadratmeter'},
  vAxis: {title: 'Millionenpreis'},
  legend: 'none'
is3D: true
// Diagramm zeichnen
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
chart.draw(data, options);
}

};

Streudiagramme

gleiche Daten, umStreudiagrammeersetzen Sie google.visualization in ScatterChart:

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

};

Balkendiagramme

Quellcode

function drawChart() {
var data = google.visualization.arrayToDataTable([
  ['Contry', 'Mhl'],
  ['Italien', 55],
  ['Frankreich', 49],
  ['Spanien', 44],
  ['Vereinigte Staaten', 24],
  
]
Fügen Sie zu den Optionen hinzu: }}
  title: 'Weltweite Weinproduktion'
is3D: true
var chart = new google.visualization.BarChart(document.getElementById('myChart'));
chart.draw(data, options);
}

};

Torte

Um die Balkendiagramme inTorteNur verwenden:

google.visualization.PieChart

Ersetzen durch:

google.visualization.BarChart

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

};

3D-Torte

Um die Torte in 3D-Form anzuzeigen, reicht es aus, title: 'Globaler Weinanbau', 添加到选项中：

Fügen Sie zu den Optionen hinzu: }}
  var options = {
  title: 'Globaler Weinanbau',
is3D: true

};