Wichtig: Der Bereich „Bilddiagramme“ von Google Chart Tools wurde am 20. April 2012 offiziell eingestellt. Das Programm funktioniert gemäß unserer Richtlinie zur Einstellung von Produkten und Diensten weiterhin.
Übersicht
Kerzendiagramm, das mit der Google Charts API als Bild gerendert wird.
Kerzendiagramme werden verwendet, um einen Anfangs- und einen Schlusswert über einer Gesamtabweichung darzustellen. Kerzendiagramme werden häufig verwendet, um das Verhalten von Aktienkursen darzustellen. In diesem Diagramm werden Elemente, bei denen der Eröffnungswert kleiner als der Schlusswert ist, grün dargestellt. Elemente, bei denen der Eröffnungswert größer als der Schlusswert ist, werden rot dargestellt. Weitere Informationen finden Sie in der Candlestick-Dokumentation in der Google Charts API.
Beispiel
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["imagechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var options = {}; dataTable = google.visualization.arrayToDataTable([ ['Gainers',10,30,45,60], ['Losers',20,35,25,45], ], true); var chart = new google.visualization.ImageCandlestickChart(document.getElementById('chart_div')); chart.draw(dataTable, options); } </script> </head> <body> <div id="chart_div" style="width: 400px; height: 240px;"></div> </body> </html>
Wird geladen
Der Paketname „google.charts.load
“ lautet "imagechart"
.
google.charts.load('current', {packages: [imagechart]});
Der Klassenname der Visualisierung lautet google.visualization.ImageCandlestickChart
.
var visualization = new google.visualization.ImageCandlestickChart(container);
Datenformat
Fünf Spalten, wobei jede Zeile eine einzelne Kerzenmarkierung beschreibt:
- Spalte 0:String, der als Label für diese Markierung auf der X-Achse verwendet wird.
- Spalte 1:Zahl, die den Tiefst-/Tiefstwert dieser Markierung angibt. Das ist die Basis der schwarzen Linie.
- Spalte 2:Nummer, die den Anfangs-/Eröffnungswert dieser Markierung angibt. Das ist ein senkrechter Rand der Kerze. Ist der Wert kleiner als der Wert in Spalte 3, ist die Kerze grün, ansonsten rot.
- Spalte 3:Nummer, die den Schlusswert dieser Markierung angibt. Das ist der zweite vertikale Rahmen der Kerze. Ist der Wert kleiner als der Wert in Spalte 2, ist die Kerze rot, andernfalls grün.
- Spalte 4:Zahl, die den Höchstwert dieser Markierung angibt. Das ist das obere Ende der schwarzen Linie.
Konfigurationsoptionen
Zusätzlich zu den im allgemeinen Bilddiagramm unterstützten Optionen unterstützt das Kerzendiagramm die folgenden Optionen:
Name | Typ | Standard | Beschreibung |
---|---|---|---|
backgroundColor | String | #FFFFFF (Weiß) | Die Hintergrundfarbe des Diagramms. Dies ist ein #RRGGBB-String mit dem #-Zeichen. |
showAxisLines | boolean | true | Gibt an, ob die Achsenlinien angezeigt werden. Ist sie auf „false“ gesetzt, werden auch die Achsenbeschriftungen nicht angezeigt. |
height | number | Höhe des beinhaltenden Elements | Höhe des Diagramms in Pixeln Wenn 30 < height oder height > 1.000 ist,wird dieser Wert standardmäßig auf 200 gesetzt. |
Max. | number | Maximaler Datenwert | Der maximale Wert für die Y-Achse. |
Min. | number | Minimaler Datenwert | Der minimale Wert auf der Y-Achse. |
showCategoryLabels | boolean | true | Bei „false“ werden die Beschriftungen der X-Achse ausgeblendet. |
showValueLabels | boolean | true | Bei „false“ werden die Labels der Y-Achse ausgeblendet. |
showValueLabelsInternal | number | Automatisch | Der Abstand zwischen den Labels der Y-Achse in Pixeln. |
Titel | String | '' | Text, der über dem Diagramm angezeigt werden soll. |
width | number | Breite des enthaltenden Elements | Breite des Diagramms in Pixeln. Wenn width kleiner als 30 oder größer als 1.000 ist, wird width auf 300 gesetzt. |
Methoden
Methode | Rückgabetyp | Beschreibung |
---|---|---|
draw(data, options) |
keine | Zeichnet das Diagramm. |
Ereignisse
Sie können sich registrieren, um die auf der Seite Allgemeine Bilddiagramm beschriebenen Ereignisse zu hören.
Datenrichtlinie
Weitere Informationen finden Sie in der Protokollierungsrichtlinie für die Chart API.