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.
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:
-
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). -
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>