Google Charts - Kombinationsdiagramm
Das Kombinationsdiagramm hilft beim Rendern jeder Serie als einen anderen Markertyp aus der folgenden Liste: Linie, Fläche, Balken, Kerzenhalter und Stufenfläche. Verwenden Sie die Eigenschaft seriesType, um einen Standardmarkertyp für Serien zuzuweisen. Die Serieneigenschaft soll verwendet werden, um die Eigenschaften jeder Serie einzeln anzugeben. Wir haben die Konfiguration zum Zeichnen dieses Diagramms bereits im Kapitel Google Charts-Konfigurationssyntax gesehen . Schauen wir uns also das vollständige Beispiel an.
Konfigurationen
Wir haben verwendet ComboChart Klasse, um kombinationsbasiertes Diagramm anzuzeigen.
//combination chart
var chart = new google.visualization.ComboChart(document.getElementById('container'));Beispiel
googlecharts_combination_chart.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = google.visualization.arrayToDataTable([
['Fruit', 'Jane', 'John', 'Average'],
['Apples', 3, 2, 2.5],
['Oranges', 2, 3, 2.5],
['Pears', 1, 5, 3],
['Bananas', 3, 9, 6],
['Plums', 4, 2, 3]
]);
// Set chart options
var options = {
title : 'Fruits distribution',
vAxis: {title: 'Fruits'},
hAxis: {title: 'Person'},
seriesType: 'bars',
series: {2: {type: 'line'}}
};
// Instantiate and draw the chart.
var chart = new google.visualization.ComboChart(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Ergebnis
Überprüfen Sie das Ergebnis.