Visualisierung: Sparkline (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

Einzelne oder mehrere Sparklines, die mit der Google Charts API mit Bildern gerendert werden Die Bilder sind in einer HTML-Tabelle enthalten.

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

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
         ['Revenue', 'Licenses'],
         [435, 132],
         [438, 131],
         [512, 137],
         [460, 142],
         [491, 140],
         [487, 139],
         [552, 147],
         [511, 146],
         [505, 151],
         [509, 149]
        ]);

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

        chart.draw(data, {width: 120, height: 40, showAxisLines: false,  showValueLabels: false, labelPosition: 'left'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 120px; height: 40px;"></div>
  </body>
</html>

Wird geladen

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

  google.charts.load("current", {packages: ["imagesparkline"]});

Der Klassenname der Visualisierung lautet google.visualization.ImageSparkLine. 

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

Datenformat

Beliebige Anzahl von Spalten. Alle Spalten müssen Zahlen enthalten. Jede Spalte wird als einzelne Sparkline dargestellt.

Konfigurationsoptionen

Name Typ Standard Beschreibung
Farbe String Gibt die Farbe an, die für alle Diagramme verwendet werden soll. Ein String im Format #rrggbb. Beispiel: „#00cc00“. Wird nur verwendet, wenn die Option colors nicht angegeben ist.
Farben Stringarray Standardfarben Die Farben, die für die Datenspalten verwendet werden sollen. Ein Array von Zeichenfolgen, wobei jedes Element eine Zeichenfolge im Format #rrggbb ist. Beispiel: „#00cc00“. Die Farbe i wird für die Datenspalte i verwendet. Wenn die Anzahl der Farben kleiner als die Anzahl der Spalten ist, wird die Farbauswahl umgebrochen.
fill boolean false Falls wahr, wird der Bereich unterhalb der Linie farbig ausgefüllt.
height number Höhe des Containers Höhe der Bilder in Pixeln
labelPosition String keine Die Position der Labels. Unterstützte Werte sind „none“, „left“ und „right“.
Max. Array von Zahlen Der maximale Datenwert jeder Sparkline Der höchste Wert für den Datenwertbereich jeder Sparkline. Der Index im Array muss mit dem Spaltenindex in der DataTable übereinstimmen. Wenn alle Werte null sind, ist dies der Maximalwert in der Reihe.
Min. Array von Zahlen Der minimale Datenwert jeder Sparkline Der niedrigste Wert für den Datenwertbereich jeder Sparkline. Der Index im Array muss mit dem Spaltenindex in der DataTable übereinstimmen. Wenn alle Werte null sind, ist dies der Mindestwert in der Reihe.
showAxisLines boolean true Falls wahr, werden die Achsenlinien angezeigt. Ist sie auf „false“ gesetzt, ist dies nicht der Fall und der Standardwert für showValueLabels ist „false“.
showValueLabels boolean „true“, außer wenn „showAxisLines“ auf „false“ festgelegt ist. Falls wahr, werden die Beschriftungen der Wertachsen angezeigt.
Titel Stringarray Es werden keine Titel angezeigt Die für die Sparkline-Diagramme zu verwendenden Titel.
width number Breite des Containers Breite der Diagramme in Pixeln.
Layout String „v“ Vertikales oder horizontales Layout: "v" für vertikal, "h" für horizontal.

Methoden

Methode Rückgabetyp Beschreibung
draw(data, options) keine Zeichnet das Diagramm.
getSelection() Array von Auswahlelementen Gibt die Indexe der ausgewählten Diagramme als Array von Objekten zurück. Jedes Objekt hat eine Spalteneigenschaft, die die Spaltennummer einer ausgewählten Sparkline enthält. Es können mehrere ausgewählte Spalten zurückgegeben werden.
setSelection(selection) keine Wählt die angegebenen Sparklines aus und hebt die Auswahl aller nicht angegebenen Sparkline auf. Auswahl ist ein Array von Objekten mit jeweils einem numerischen column-Attribut, das dem Index der ausgewählten Sparkline entspricht. Weitere Informationen finden Sie unter setSelection().

Ereignisse

Name Beschreibung Attribute
auswählen Standardauswahl-Ereignis. Ohne

Datenrichtlinie

Weitere Informationen finden Sie in der Protokollierungsrichtlinie für die Chart API.