Kurzinfos

  1. Tooltips: Einführung
  2. Typ der Kurzinfo angeben
  3. Standardkurzinfos
  4. Inhalt der Kurzinfo anpassen
  5. HTML-Kurzinfos verwenden
  6. HTML-Inhalte anpassen
  7. Kurzinfos zum Drehen
  8. Diagramme in Kurzinfos platzieren
  9. Kurzinfo-Aktionen
  10. Daten annotieren
  11. Unterstützte Diagramme

Kurzinfos: Eine Einführung

Kurzinfos sind die kleinen Felder, die angezeigt werden, wenn Sie den Mauszeiger auf etwas bewegen. Kurzinfos sind allgemeiner gehalten und können überall auf dem Bildschirm angezeigt werden. Kurzinfos sind immer an etwas angehängt, z. B. einen Punkt in einem Streudiagramm oder einen Balken in einem Balkendiagramm.

In dieser Dokumentation erfahren Sie, wie Sie Kurzinfos in Google Charts erstellen und anpassen.

Typ der Kurzinfo angeben

Google Charts erstellt automatisch Kurzinfos für alle Kerndiagramme. Sie werden standardmäßig als SVG gerendert, außer unter IE 8, wo sie als VML gerendert werden. Sie können HTML-Kurzinfos für Kerndiagramme erstellen. Dazu geben Sie tooltip.isHtml: true in den Diagrammoptionen an, die an den draw()-Aufruf übergeben werden. Dadurch können Sie auch Tooltip-Aktionen erstellen.

Standardkurzinfos

Wenn kein benutzerdefinierter Inhalt vorhanden ist, wird der Inhalt der Kurzinfo automatisch anhand der zugrunde liegenden Daten generiert. Zum Anzeigen der Kurzinfo bewegen Sie den Mauszeiger auf einen der Balken im Diagramm.

Bewegen Sie den Mauszeiger auf die Balken, um Standard-Kurzinfos zu sehen.

Inhalt der Kurzinfo anpassen

In diesem Beispiel fügen wir den Kurzinfos benutzerdefinierten Inhalt hinzu. Dazu fügen wir der DataTable eine neue Spalte hinzu und markieren sie mit der Rolle „Kurzinfo“.

Hinweis: Dies wird von der Visualisierung Blasendiagramm nicht unterstützt. 

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

      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string', 'Year');
        dataTable.addColumn('number', 'Sales');
        // A column for custom tooltip content
        dataTable.addColumn({type: 'string', role: 'tooltip'});
        dataTable.addRows([
          ['2010', 600,'$600K in our first year!'],
          ['2011', 1500, 'Sunspot activity made this our best year ever!'],
          ['2012', 800, '$800K in 2012.'],
          ['2013', 1000, '$1M in sales last year.']
        ]);

        var options = { legend: 'none' };
        var chart = new google.visualization.ColumnChart(document.getElementById('tooltip_action'));
        chart.draw(dataTable, options);
      }

HTML-Kurzinfos verwenden

Dieses Beispiel baut auf dem vorherigen auf und aktiviert HTML-Kurzinfos. Beachten Sie, dass den Diagrammoptionen tooltip.isHtml: true hinzugefügt wurde. 

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

      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string', 'Year');
        dataTable.addColumn('number', 'Sales');
        // A column for custom tooltip content
        dataTable.addColumn({type: 'string', role: 'tooltip'});
        dataTable.addRows([
          ['2010', 600,'$600K in our first year!'],
          ['2011', 1500, 'Sunspot activity made this our best year ever!'],
          ['2012', 800, '$800K in 2012.'],
          ['2013', 1000, '$1M in sales last year.']
        ]);

        var options = {
          tooltip: {isHtml: true},
          legend: 'none'
        };
        var chart = new google.visualization.ColumnChart(document.getElementById('col_chart_html_tooltip'));
        chart.draw(dataTable, options);
      }

Das sieht nicht viel anders aus, aber jetzt können wir den HTML-Code anpassen.

HTML-Inhalte anpassen

In den vorherigen Beispielen wurden nur Kurzinfos mit Nur-Text-Inhalt verwendet. Die wahre Stärke von HTML-Kurzinfos zeigt sich jedoch, wenn Sie sie mithilfe von HTML-Markup anpassen können. Dazu sind zwei Schritte erforderlich:

  1. Geben Sie in den Diagrammoptionen tooltip.isHtml: true an. Damit wird das Diagramm angewiesen, die Kurzinfos in HTML (und nicht in SVG) zu zeichnen.
  2. Markieren Sie in der Datentabelle eine ganze Spalte oder eine bestimmte Zelle mit der benutzerdefinierten Eigenschaft html. Eine Datentabellenspalte mit der Rolle „Kurzinfo“ und dem HTML-Attribut wäre:
    dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}})

    Hinweis: Dies funktioniert nicht bei der Visualisierung Blasendiagramm. Der Inhalt der HTML-Kurzinfos für das Blasendiagramm kann nicht angepasst werden.

Wichtig: Achten Sie darauf, dass der HTML-Code in Ihren Kurzinfos von einer vertrauenswürdigen Quelle stammt. Wenn die benutzerdefinierten HTML-Inhalte von Nutzern erstellte Inhalte enthalten, ist es wichtig, diese Inhalte mit Escapezeichen zu versehen. Andernfalls sind Ihre ansprechenden Visualisierungen anfällig für XSS.

Für benutzerdefinierte HTML-Inhalte reicht es aus, einfach ein <img>-Tag hinzuzufügen oder Text fett zu formatieren:

Benutzerdefinierte HTML-Inhalte können auch dynamisch generierte Inhalte umfassen. Hier wird eine Kurzinfo mit einer dynamisch generierten Tabelle für jeden Kategoriewert hinzugefügt. Da die Kurzinfo mit dem Zeilenwert verknüpft ist, wird die HTML-Kurzinfo angezeigt, wenn Sie den Mauszeiger auf einen der Balken bewegen.

In diesem Beispiel wird gezeigt, wie eine benutzerdefinierte HTML-Kurzinfo an eine Domainspalte angehängt werden kann. (In den vorherigen Beispielen war es an eine Datenspalte angehängt.) Wenn Sie die Kurzinfo für die Domainachse aktivieren möchten, legen Sie die Option focusTarget: 'category' fest. 

function drawChart() {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('string', 'Country');
  // Use custom HTML content for the domain tooltip.
  dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
  dataTable.addColumn('number', 'Gold');
  dataTable.addColumn('number', 'Silver');
  dataTable.addColumn('number', 'Bronze');

  dataTable.addRows([
    ['USA', createCustomHTMLContent('https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg', 46, 29, 29), 46, 29, 29],
    ['China', createCustomHTMLContent('https://upload.wikimedia.org/wikipedia/commons/f/fa/Flag_of_the_People%27s_Republic_of_China.svg', 38, 27, 23), 38, 27, 23],
    ['UK', createCustomHTMLContent('https://upload.wikimedia.org/wikipedia/commons/a/ae/Flag_of_the_United_Kingdom.svg', 29, 17, 19), 29, 17, 19]
  ]);

  var options = {
    title: 'London Olympics Medals',
    colors: ['#FFD700', '#C0C0C0', '#8C7853'],
    // This line makes the entire category's tooltip active.
    focusTarget: 'category',
    // Use an HTML tooltip.
    tooltip: { isHtml: true }
  };

  // Create and draw the visualization.
  new google.visualization.ColumnChart(document.getElementById('custom_html_content_div')).draw(dataTable, options);
}

function createCustomHTMLContent(flagURL, totalGold, totalSilver, totalBronze) {
  return '<div style="padding:5px 5px 5px 5px;">' +
      '<img src="' + flagURL + '" style="width:75px;height:50px"><br/>' +
      '<table class="medals_layout">' + '<tr>' +
      '<td><img src="https://upload.wikimedia.org/wikipedia/commons/1/15/Gold_medal.svg" style="width:25px;height:25px"/></td>' +
      '<td><b>' + totalGold + '</b></td>' + '</tr>' + '<tr>' +
      '<td><img src="https://upload.wikimedia.org/wikipedia/commons/0/03/Silver_medal.svg" style="width:25px;height:25px"/></td>' +
      '<td><b>' + totalSilver + '</b></td>' + '</tr>' + '<tr>' +
      '<td><img src="https://upload.wikimedia.org/wikipedia/commons/5/52/Bronze_medal.svg" style="width:25px;height:25px"/></td>' +
      '<td><b>' + totalBronze + '</b></td>' + '</tr>' + '</table>' + '</div>';
}

Kurzinfos zum Drehen

Kurzinfos in Google Charts können mit CSS rotiert werden. Im folgenden Diagramm werden die Kurzinfos mit diesem Inline-CSS direkt vor dem Diagramm-div um 30° im Uhrzeigersinn gedreht:

<style>div.google-visualization-tooltip { transform: rotate(30deg); }</style>

Dies funktioniert nur bei HTML-Kurzinfos, also solche mit der Option isHtml: true.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Year', 'Fixations'],
          ['2015',  80],
          ['2016',  90],
          ['2017',  100],
          ['2018',  90],
          ['2019',  80],
        ]);

        var options = {
          tooltip: { isHtml: true },    // CSS styling affects only HTML tooltips.
          legend: { position: 'none' },
          bar: { groupWidth: '90%' },
          colors: ['#A61D4C']
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('tooltip_rotated'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <!-- The next line rotates HTML tooltips by 30 degrees clockwise. -->
    <style>div.google-visualization-tooltip { transform: rotate(30deg); }</style>
    <div id="tooltip_rotated" style="width: 400px; height: 400px;"></div>
  </body>
</html>

Diagramme in Kurzinfos platzieren

HTML-Kurzinfos können fast alle HTML-Inhalte enthalten, auch Google-Diagramme. Wenn Diagramme in Kurzinfos enthalten sind, können Ihre Nutzer zusätzliche Informationen abrufen, wenn sie den Mauszeiger auf ein Datenelement bewegen. Dies ist eine gute Möglichkeit, auf einen Blick detaillierte Angaben zu machen und es den Nutzern zu ermöglichen, tiefer einzutauchen.

Das Säulendiagramm unten zeigt ein Diagramm mit den höchsten Zuschauerzahlen verschiedener wichtiger Sportereignisse, wobei die Kurzinfos zu jedem ein Liniendiagramm mit den durchschnittlichen Zuschauerzahlen in den letzten zehn Jahren zeigen.

Hier sind einige Dinge, die Sie beachten sollten. Für jeden Datensatz, der in einer Kurzinfo angezeigt werden soll, muss zuerst ein druckbares Diagramm gezeichnet werden. Zweitens benötigt jedes Kurzinfodiagramm einen "ready"-Event-Handler, den wir über addListener aufrufen, um ein druckbares Diagramm zu erstellen.

WICHTIG: Alle Diagramme mit Kurzinfos müssen vor dem primären Diagramm gezeichnet werden. Dies ist erforderlich, um die Bilder abzurufen und zur DataTable des primären Diagramms hinzuzufügen.

Wichtige Teile
      // Draws your charts to pull the PNGs for your tooltips.
      function drawTooltipCharts() {

        var data = new google.visualization.arrayToDataTable(tooltipData);
        var view = new google.visualization.DataView(data);

        // For each row of primary data, draw a chart of its tooltip data.
        for (var i = 0; i < primaryData.length; i++) {

          // Set the view for each event's data
          view.setColumns([0, i + 1]);

          var hiddenDiv = document.getElementById('hidden_div');
          var tooltipChart = new google.visualization.LineChart(hiddenDiv);

          google.visualization.events.addListener(tooltipChart, 'ready', function() {

            // Get the PNG of the chart and set is as the src of an img tag.
            var tooltipImg = '<img src="' + tooltipChart.getImageURI() + '">';

            // Add the new tooltip image to your data rows.
            primaryData[i][2] = tooltipImg;

          });
          tooltipChart.draw(view, tooltipOptions);
        }
        drawPrimaryChart();
      }

      function drawPrimaryChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Event');
        data.addColumn('number', 'Highest Recent Viewership');

        // Add a new column for your tooltips.
        data.addColumn({
          type: 'string',
          label: 'Tooltip Chart',
          role: 'tooltip',
          'p': {'html': true}
        });

        // Add your data (with the newly added tooltipImg).
        data.addRows(primaryData);

        var visibleDiv = document.getElementById('visible_div');
        var primaryChart = new google.visualization.ColumnChart(visibleDiv);
        primaryChart.draw(data, primaryOptions);

      }
Ganze Webseite
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawTooltipCharts);

      // Set up data for visible chart.
      var primaryData = [
        ['NBA Finals', 22.4],
        ['NFL Super Bowl', 111.3],
        ['MLB World Series', 19.2],
        ['UEFA Champions League Final', 1.9],
        ['NHL Stanley Cup Finals', 6.4],
        ['Wimbledon Men\'s Championship', 2.4]
      ];

      // Set up data for your tooltips.
      var tooltipData = [
        ['Year', 'NBA Finals', 'NFL Super Bowl', 'MLB World Series',
        'UEFA Champions League Final', 'NHL Stanley Cup Finals',
        'Wimbledon Men\'s Championship'],
        ['2005', 12.5, 98.7, 25.3, 0.6, 3.3, 2.8],
        ['2006', 13.0, 90.7, 17.1, 0.8, 2.8, 3.4],
        ['2007', 9.3, 93.0, 15.8, 0.9, 1.8, 3.8],
        ['2008', 14.9, 97.5, 17.1, 1.3, 4.4, 5.1],
        ['2009', 14.3, 98.7, 13.6, 2.1, 4.9, 5.7],
        ['2010', 18.2, 106.5, 19.4, 2.2, 5.2, 2.3],
        ['2011', 17.4, 111.0, 14.3, 4.2, 4.6, 2.7],
        ['2012', 16.8, 111.3, 16.6, 2.0, 2.9, 3.9],
        ['2013', 16.6, 108.7, 12.7, 1.4, 5.8, 2.5],
        ['2014', 15.7, 111.3, 15.0, 1.9, 4.7, 2.4]
      ];

      var primaryOptions = {
        title: 'Highest U.S. Viewership for Most Recent Event (in millions)',
        legend: 'none',
        tooltip: {isHtml: true} // This MUST be set to true for your chart to show.
      };

      var tooltipOptions = {
        title: 'U.S. Viewership Over The Last 10 Years (in millions)',
        legend: 'none'
      };

      // Draws your charts to pull the PNGs for your tooltips.
      function drawTooltipCharts() {

        var data = new google.visualization.arrayToDataTable(tooltipData);
        var view = new google.visualization.DataView(data);

        // For each row of primary data, draw a chart of its tooltip data.
        for (var i = 0; i < primaryData.length; i++) {

          // Set the view for each event's data
          view.setColumns([0, i + 1]);

          var hiddenDiv = document.getElementById('hidden_div');
          var tooltipChart = new google.visualization.LineChart(hiddenDiv);

          google.visualization.events.addListener(tooltipChart, 'ready', function() {

            // Get the PNG of the chart and set is as the src of an img tag.
            var tooltipImg = '<img src="' + tooltipChart.getImageURI() + '">';

            // Add the new tooltip image to your data rows.
            primaryData[i][2] = tooltipImg;

          });
          tooltipChart.draw(view, tooltipOptions);
        }
        drawPrimaryChart();
      }

      function drawPrimaryChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Event');
        data.addColumn('number', 'Highest Recent Viewership');

        // Add a new column for your tooltips.
        data.addColumn({
          type: 'string',
          label: 'Tooltip Chart',
          role: 'tooltip',
          'p': {'html': true}
        });

        // Add your data (with the newly added tooltipImg).
        data.addRows(primaryData);

        var visibleDiv = document.getElementById('visible_div');
        var primaryChart = new google.visualization.ColumnChart(visibleDiv);
        primaryChart.draw(data, primaryOptions);

      }
    </script>
  </head>
<body>
<div id="hidden_div" style="display:none"></div>
<div id="visible_div" style="height:300px"></div>
</body>
</html>

Kurzinfo-Aktionen

Kurzinfos können auch JavaScript-definierte Aktionen enthalten. Hier ein einfaches Beispiel: Hier ist eine Kurzinfo mit einer Aktion, die ein Dialogfeld öffnet, wenn der Nutzer auf „Beispielbuch ansehen“ klickt:

Die Option tooltip wird ausgelöst, wenn der Nutzer einen Keil des Kreises auswählt. Dadurch wird der in setAction definierte Code ausgeführt:

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Genre', 'Percentage of my books'],
          ['Science Fiction', 217],
          ['General Science', 203],
          ['Computer Science', 175],
          ['History', 155],
          ['Economics/Political Science', 98],
          ['General Fiction', 72],
          ['Fantasy', 51],
          ['Law', 29]
        ]);

        var chart = new google.visualization.PieChart(
          document.getElementById('tooltip_action'));

        var options = { tooltip: { trigger: 'selection' }};

        chart.setAction({
          id: 'sample',
          text: 'See sample book',
          action: function() {
            selection = chart.getSelection();
            switch (selection[0].row) {
              case 0: alert('Ender\'s Game'); break;
              case 1: alert('Feynman Lectures on Physics'); break;
              case 2: alert('Numerical Recipes in JavaScript'); break;
              case 3: alert('Truman'); break;
              case 4: alert('Freakonomics'); break;
              case 5: alert('The Mezzanine'); break;
              case 6: alert('The Color of Magic'); break;
              case 7: alert('The Law of Superheroes'); break;
            }
          }
        });

        chart.draw(data, options);
      }

Aktionen können visible, enabled, beide oder keine der beiden Aktionen sein. Beim Rendern eines Google-Diagramms wird eine Kurzinfo-Aktion nur angezeigt, wenn sie sichtbar ist, und nur anklickbar, wenn sie aktiviert ist. (Deaktiviert, aber sichtbare Aktionen sind ausgegraut.)

visible und enabled sollten Funktionen sein, die wahre oder falsche Werte zurückgeben. Diese Funktionen können von der Element-ID und der Nutzerauswahl abhängen, sodass Sie die Sichtbarkeit und Anklickbarkeit von Aktionen optimieren können.

Kurzinfos können für focus und selection ausgelöst werden. Bei Aktionen für Kurzinfos ist selection jedoch besser geeignet. Dadurch bleibt die Kurzinfo bestehen, sodass der Nutzer die Aktion leichter auswählen kann.

Bei den Aktionen muss es sich natürlich nicht um Benachrichtigungen handeln: Alles, was mit JavaScript möglich ist, kann über eine Aktion erfolgen. Hier fügen wir zwei Aktionen hinzu: eine zum Vergrößern des Keils und eine zum Verkleinern.

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Genre', 'Percentage of my books'],
          ['Science Fiction', 217],
          ['General Science', 203],
          ['Computer Science', 175],
          ['History', 155],
          ['Economics & Political Science', 98],
          ['General Fiction', 72],
          ['Fantasy', 51],
          ['Law', 29]
        ]);

        var chart = new google.visualization.PieChart(
          document.getElementById('tooltip_action_2'));

        var options = { tooltip: { trigger: 'selection' }};

        chart.setAction({
          id: 'increase',
          text: 'Read 20 more books',
          action: function() {
            data.setCell(chart.getSelection()[0].row, 1,
                         data.getValue(chart.getSelection()[0].row, 1) + 20);
            chart.draw(data, options);
          }
        });

        chart.setAction({
          id: 'decrease',
          text: 'Read 20 fewer books',
          action: function() {
            data.setCell(chart.getSelection()[0].row, 1,
                         data.getValue(chart.getSelection()[0].row, 1) - 20);
            chart.draw(data, options);
          }
        });

        chart.draw(data, options);
      }

Daten annotieren

Sie können Text direkt in einem Google-Diagramm einblenden. Dazu verwenden Sie annotationText anstelle von tooltip als Spalte. Sie können die Kurzinfo einblenden, wenn Sie den Mauszeiger auf die Anmerkung bewegen.

function drawChart() {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('string', 'Year');
  dataTable.addColumn('number', 'USA');
  dataTable.addColumn({type: 'string', role: 'annotation'});
  dataTable.addColumn({type: 'string', role: 'annotationText', p: {html:true}});
  dataTable.addColumn('number', 'China');
  dataTable.addColumn('number', 'UK');
  dataTable.addRows([
    ['2000',  94, '',  '', 58, 28],
    ['2004', 101, '',  '', 63, 30],
    ['2008', 110, 'An all time high!', '<img width=100px src="https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg">', 100, 47],
    ['2012', 104, '',  '', 88, 65]
  ]);

  var options = { tooltip: {isHtml: true}};
  var chart = new google.visualization.LineChart(document.getElementById('tt_6_annotation'));
  chart.draw(dataTable, options);
}

Unterstützte Diagramme

HTML-Kurzinfos werden derzeit für die folgenden Diagrammtypen unterstützt:

Wenn Sie die Rollen annotationText oder tooltip verwenden, finden Sie in der Dokumentation zu Rollen Informationen zu zukünftigen Änderungen und dazu, wie sich zukünftige Probleme vermeiden lassen.