Visualisierung: Liniendiagramm (Bild)

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

Ein Liniendiagramm, das mithilfe der Google Charts API als Bild gerendert wird

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:["imagelinechart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var chart = new google.visualization.ImageLineChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 400, height: 240, min: 0});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

Wird geladen

Der Paketname „google.charts.load“ lautet "imagelinechart". 

  google.charts.load('current', {packages: ['imagelinechart']});

Der Klassenname der Visualisierung lautet google.visualization.ImageLineChart. 

  var visualization = new google.visualization.ImageLineChart(container);

Datenformat

Die erste Spalte sollte ein String sein und die Kategoriebeschriftung enthalten. Es kann eine beliebige Anzahl von Spalten folgen, die alle numerisch sein müssen. Jede Spalte wird als separate Zeile angezeigt.

Konfigurationsoptionen

Name Typ Standard Beschreibung
backgroundColor String #FFFFFF (Weiß) Die Hintergrundfarbe für das Diagramm im Farbformat der Chart API.
Farben Array<string> Auto Damit können Sie jeder Datenreihe bestimmte Farben zuweisen. Farben werden im Farbformat der Chart API angegeben. Die Farbe i wird für die Datenspalte i verwendet und springt an den Anfang, wenn mehr Datenspalten als Farben vorhanden sind. Wenn Varianten einer einzelnen Farbe für alle Reihen zulässig sind, verwenden Sie stattdessen die Option color.
enableEvents boolean false Veranlasst, dass Diagramme vom Nutzer ausgelöste Ereignisse wie Klicks oder Mouseover auslösen. Wird nur für bestimmte Diagrammtypen unterstützt. Weitere Informationen finden Sie unten im Abschnitt Ereignisse.
height number Höhe des Containers Höhe des Diagramms in Pixeln.
Legende String 'rechts' Position und Typ der Legende. Folgende sind möglich:
  • "right": rechts neben dem Diagramm
  • 'left' – links neben dem Diagramm
  • 'top' (über dem Diagramm)
  • 'bottom': unter dem Diagramm
  • "none": Es wird keine Legende angezeigt.
Max. number automatisch Der Maximalwert, der auf der Y-Achse angezeigt werden soll.
Min. number automatisch Der Mindestwert, der auf der Y-Achse angezeigt werden soll.
showAxisLines boolean true Wenn die Richtlinie auf „false“ gesetzt ist, werden die Achsenlinien und ‐labels entfernt.
showCategoryLabels boolean wie showAxisLines Wenn dieser Wert auf „false“ gesetzt ist, werden die Beschriftungen der Kategorien (die Beschriftungen der X-Achse) entfernt.
showValueLabels boolean wie showAxisLines Wenn dieser Wert auf „false“ gesetzt ist, werden die Beschriftungen der Werte (die Beschriftungen der Y-Achse) entfernt.
Titel String kein Titel Text, der über dem Diagramm angezeigt werden soll.
valueLabelsInterval number Auto Das Intervall, in dem die Labels der Wertachsen angezeigt werden sollen. Beispiel: Wenn min 0 ist, max 100 und valueLabelsInterval 20 ist, werden im Diagramm Achsenlabels bei (0, 20, 40, 60, 80 100) angezeigt.
width number Breite des Containers Breite des Diagramms in Pixeln.

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.