Bild mit Kerzendiagramm

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.

  1. Übersicht
  2. Beispiel
  3. Loading
  4. Datenformat
  5. Konfigurationsoptionen
  6. Methoden
  7. Ereignisse
  8. Datenrichtlinie

Ü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.