Diese Seite wurde von der Cloud Translation API übersetzt.

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.

Overview
Beispiel
Loading
Datenformat
Konfigurationsoptionen
Methoden
Ereignisse
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.