Kurzinfos

Tipps: Einführung

Die Kurzinfos werden angezeigt, wenn Sie den Mauszeiger auf etwas bewegen. (Kurzprofile sind allgemeiner gehalten und können überall auf dem Bildschirm angezeigt werden; Kurzinfos sind immer mit etwas verknüpft, z. B. einem Punkt in einem Streudiagramm oder einem Balken in einem Balkendiagramm.)

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

Kurzinfotyp angeben

In Google Charts werden automatisch Kurzinfos für alle wichtigen Diagramme erstellt. Sie werden standardmäßig als SVG gerendert, mit Ausnahme von IE 8, wo sie als VML gerendert werden. Sie können HTML-Kurzinfos zu den Hauptdiagrammen erstellen. Geben Sie dazu tooltip.isHtml: true in den Diagrammoptionen an, die an den draw()-Aufruf übergeben werden. Damit können Sie auch Kurzinfo-Aktionen erstellen.

Standard-Kurzinfos

Wenn keine benutzerdefinierten Inhalte vorhanden sind, wird der Kurzinfo-Inhalt basierend auf den zugrunde liegenden Daten automatisch generiert. Sie können die Kurzinfo aufrufen, indem Sie den Mauszeiger auf einen der Balken im Diagramm bewegen.

Bewegen Sie den Mauszeiger auf die Balken, um die Standardinformationen zu sehen.

Kurzinfoinhalt anpassen

In diesem Beispiel fügen wir den Kurzinfos benutzerdefinierte Inhalte hinzu. Dazu fügen wir der DataTable eine neue Spalte hinzu und markieren diese mit der Kurzinfo-Rolle.

Hinweis:Dies wird in der Visualisierung des Blasendiagramms 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, indem HTML-Kurzinfos aktiviert wird. 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 alle Kurzinfos mit Nur-Text-Inhalten verwendet. Die Möglichkeiten, die sich durch den Einsatz von HTML-Kurzinfos bieten, lassen sich jedoch mithilfe von HTML-Markup anpassen. So aktivieren Sie sie:

  1. Geben Sie in den Diagrammoptionen tooltip.isHtml: true an. Damit wird dem Diagramm mitgeteilt, dass die Kurzinfos in HTML gezeichnet werden sollen (im Gegensatz zu SVG).
  2. Markieren Sie eine ganze Spalte oder eine bestimmte Zelle in der Datentabelle mit dem benutzerdefinierten Attribut html. Eine Datenspalte mit der Kurzinfo-Rolle und dem HTML-Attribut würde so aussehen:
    dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}})

    Hinweis: Dies funktioniert bei der Visualisierung des Blasendiagramms nicht. Der Inhalt von HTML-Kurzinfos zum Blasendiagramm kann nicht angepasst werden.

Wichtig:Achten Sie darauf, dass der HTML-Code in Ihren Kurzinfos von einer vertrauenswürdigen Quelle stammt. Wenn der benutzerdefinierte HTML-Inhalt nutzergenerierte Inhalte enthält, ist eine Maskierung wichtig. Andernfalls sind Ihre Visualisierungen möglicherweise für XSS-Angriffe offen.

Benutzerdefinierte HTML-Inhalte können beispielsweise so aussehen: <img>-Tag oder Fettdruck:

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 an den Zeilenwert angehängt ist, wird beim Bewegen des Mauszeigers auf einen der Balken die HTML-Kurzinfo angezeigt.

Dieses Beispiel zeigt, wie eine benutzerdefinierte HTML-Kurzinfo an eine Domainspalte angehängt werden kann. In den vorherigen Beispielen wurde 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 für die Rotation

Kurzinfos in Google Charts können mit CSS gedreht 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 bei denen 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 Tooltipps platzieren

HTML-Kurzinfos können die meisten beliebigen HTML-Inhalte umfassen – sogar ein Google-Diagramm. Mithilfe von Diagrammen in den Kurzinfos können Nutzer zusätzliche Informationen erhalten, wenn sie den Mauszeiger auf ein Datenelement bewegen.

Das folgende Säulendiagramm enthält ein Diagramm mit den meisten aktuellen Sportereignissen und den höchsten Zuschauerzahlen. Die Kurzinfos enthalten jeweils ein Liniendiagramm der durchschnittlichen Zuschauerzahlen in den letzten zehn Jahren.

Hier einige Hinweise: Zuerst muss für jeden Datensatz, der in einer Kurzinfo angezeigt werden soll, ein Druckbares Diagramm gezeichnet werden. Zweitens benötigt jedes Kurzinfo-Diagramm einen „Ready“-Event-Handler, den wir über addListener aufrufen, um ein druckbares Diagramm zu erstellen.

WICHTIG: Alle Kurzinfo-Diagramme müssen vor dem primären Diagramm gezeichnet werden. Dies ist erforderlich, um die Bilder zu erfassen, die der DataTable des primären Diagramms hinzugefügt werden sollen.

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);

      }
Vollständige 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>

Aktionen in der Kurzinfo

Kurzinfos können auch JavaScript-definierte Aktionen enthalten. Hier ein einfaches Beispiel:

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

        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, beides oder keine der beiden Aktionen sein. Beim Rendern eines Google-Diagramms wird eine Kurzinfo nur angezeigt, wenn sie sichtbar ist, und sie kann nur angeklickt werden, 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. So können Sie die Sichtbarkeit und Anklickbarkeit von Aktionen optimieren.

Kurzinfos können sowohl auf focus als auch auf selection ausgelöst werden. Bei Kurzinfo-Aktionen ist jedoch selection zu bevorzugen. Dadurch wird die Kurzinfo beibehalten und der Nutzer kann die Aktion einfacher auswählen.

Die Aktionen müssen natürlich keine Warnungen sein. Alles, was du mit JavaScript tun kannst, ist eine Aktion. Hier fügen wir zwei Aktionen hinzu: eine zum Verkleinern des Kreisdiagramms und eine weitere 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

Wenn Sie Text direkt in einem Google-Diagramm einblenden möchten, verwenden Sie annotationText anstelle von tooltip als Rolle der Spalte. Sie können die Kurzinfo durch Bewegen des Mauszeigers über die Anmerkung aufrufen.

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 Sie zukünftige Probleme vermeiden können.