Visualisierung: Sparkline (Bild)

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

Einzelne oder mehrere Sparklines, die mit Bildern über die Google Charts API 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 von 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 sein. Jede Spalte wird als einzelne Wortgrafik angezeigt.

Konfigurationsoptionen

Name Typ Standard Beschreibung
Farbe String Gibt eine 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 für die Datenspalten zu verwendenden Farben. Ein String-Array, bei dem jedes Element ein String 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 Wenn „true“, wird der Bereich unterhalb der Linie in der Farbe dargestellt.
height Zahl Containerhöhe Höhe der Bilder in Pixel.
labelPosition String keine Die Position der Labels. Unterstützte Werte sind „none“, „left“ und „right“.
max Array von Zahlen Der maximale Datenwert jeder Wortgrafik 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 Höchstwert in der Reihe.
Min. Array von Zahlen Der minimale Datenwert jeder Wortgrafik 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.
Achsen einblenden boolean true Bei „true“ werden Achsenlinien angezeigt. Wenn „false“ ist, ist dies nicht der Fall. Der Standardwert für „showValueLabels“ ist „false“.
Wertlabels anzeigen boolean „true“, es sei denn, „showAxisLines“ ist „false“. Bei „true“ werden Labels für die Wertachse angezeigt.
title Stringarray Keine Titel angezeigt Für jede Wortgrafik zu verwendende Titel.
width Zahl Containerbreite Breite des Diagramms in Pixeln.
Layout String „v“ Vertikales oder horizontales Layout: „v“ für vertikal und „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 Wortgrafik enthält. Kann mehrere ausgewählte Spalten zurückgeben.
setSelection(selection) keine Wählt die angegebenen Sparklines aus und hebt die Auswahl aller nicht angegebenen Sparkline auf. Bei der Auswahl handelt es sich um ein Array mit Objekten mit einer numerischen Property vom Typ column. Dies ist der Index der ausgewählten Sparkline. Weitere Informationen finden Sie unter setSelection().

Ereignisse

Name Beschreibung Attribute
wähle Standardauswahlereignis.

Datenrichtlinie

Weitere Informationen finden Sie in der Chart API-Protokollierungsrichtlinie.