Kerzendiagramm

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.

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

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