Wichtig: Der Bereich „Bilddiagramme“ von Google Chart Tools wurde am 20. April 2012 offiziell eingestellt. Es wird gemäß unserer Richtlinie zur Einstellung von Produkten und Diensten weiterhin funktionieren.
Übersicht
Kerzendiagramme, die mit der Google Charts API als Bild gerendert werden
Ein Kerzendiagramm wird verwendet, um einen Eröffnungs- und einen Schlusswert über einer Gesamtvarianz einzublenden. Kerzendiagramme zeigen häufig das Verhalten von Aktienkursen an. In diesem Diagramm werden Elemente, deren Eröffnungswert kleiner als der Schlusswert ist, grün und Elemente, bei denen der Eröffnungswert höher ist als der Schlusswert, rot dargestellt. Weitere Informationen finden Sie in der Dokumentation zu Kerzendiagrammen 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 von 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, in denen jede Zeile eine einzelne Kerzenmarkierung beschreibt:
- Spalte 0:Der String, der als Markierung für diese Markierung auf der X-Achse verwendet wird.
- Spalte 1:Zahl, die den Mindest-/Mindestwert dieser Markierung angibt Dies ist die Basis der schwarzen Linie.
- Spalte 2:Zahl, die den Anfangs-/Anfangswert dieser Markierung angibt Das ist ein vertikaler Rahmen der Kerze. Liegt der Wert unter dem Wert in Spalte 3, ist die Kerze grün, andernfalls rot.
- Spalte 3: Zahl, die den Abschluss-/Abschlusswert dieser Markierung angibt Dies ist der zweite vertikale Rahmen der Kerze. Liegt der Wert unter dem Wert in Spalte 2, ist die Kerze rot, ansonsten grün.
- Spalte 4:Zahl, die den hohen/maximalen Wert dieser Markierung angibt Dies ist die Oberseite der schwarzen Linie.
Konfigurationsoptionen
Im Kerzendiagramm werden zusätzlich zu den vom Allgemeinen Bilddiagramm unterstützten Optionen die folgenden Optionen unterstützt:
Name | Typ | Standard | Beschreibung |
---|---|---|---|
backgroundColor | String | „#FFFFFF“ (weiß) | Die Hintergrundfarbe für das Diagramm. Dies ist ein #RRGGBB-String mit dem Zeichen „#“. |
Achsen einblenden | boolean | true | Gibt an, ob die Achsenlinien angezeigt werden sollen. Ist sie auf „false“ gesetzt, werden die Labels der Achse ebenfalls nicht angezeigt. |
height | Zahl | Höhe des beinhaltenden Elements | Höhe des Diagramms in Pixeln. Wenn 30 < height oder height > 1.000 ist,wird standardmäßig 200 verwendet. |
max | Zahl | Maximaler Datenwert | Der maximale Wert auf der Y-Achse. |
Min. | Zahl | Minimaler Datenwert | Der Mindestwert für die Y-Achse. |
Kategorielabels anzeigen | boolean | true | Bei „false“ werden die Labels der X-Achse ausgeblendet. |
Wertlabels anzeigen | boolean | true | Bei „false“ werden die Labels der Y-Achse ausgeblendet. |
ShowValueLabelsIntern | Zahl | Automatisch | Der Abstand zwischen den Labels der Y-Achse in Pixeln. |
title | String | '' | Text, der über dem Diagramm angezeigt werden soll. |
width | Zahl | Breite des beinhaltenden Elements | Breite des Diagramms in Pixeln. Wenn die width kleiner als 30 oder größer als 1.000 ist, wird width auf 300 festgelegt. |
Methoden
Methode | Rückgabetyp | Beschreibung |
---|---|---|
draw(data, options) |
keine | Zeichnet das Diagramm. |
Ereignisse
Sie können sich registrieren, damit Sie die auf der Seite Generische Bildgrafik beschriebenen Ereignisse hören.
Datenrichtlinie
Weitere Informationen finden Sie in der Chart API-Protokollierungsrichtlinie.