- Info-bulles: introduction
- Spécifier le type d'info-bulle
- Info-bulles standards
- Personnaliser le contenu des info-bulles
- Utiliser les info-bulles HTML
- Personnaliser le contenu HTML
- Alterner les info-bulles
- Insérer des graphiques dans des info-bulles
- Actions des info-bulles
- Annoter des données
- Graphiques compatibles
Conseils: Introduction
Les info-bulles sont de petites zones qui s'affichent lorsque vous pointez sur un élément. Les cartes de visite sont plus générales et peuvent apparaître n'importe où sur l'écran. Les info-bulles sont toujours associées à un élément, tel qu'un point sur un graphique à nuage de points ou une barre sur un graphique à barres.
Dans cette documentation, vous allez apprendre à créer et à personnaliser des info-bulles dans Google Charts.
Spécifier le type d'info-bulle
Google Charts crée automatiquement des info-bulles pour tous les graphiques de base.
Ils seront affichés par défaut au format SVG, sauf sous IE 8 où ils seront rendus au format VML. Vous pouvez créer des info-bulles HTML sur des graphiques de base en spécifiant tooltip.isHtml: true
dans les options de graphique transmises à l'appel draw(), ce qui vous permettra également de créer des actions dans les info-bulles.
Info-bulles standards
En l'absence de contenu personnalisé, le contenu de l'info-bulle est automatiquement généré en fonction des données sous-jacentes. Pour afficher l'info-bulle, pointez sur l'une des barres du graphique.
Personnaliser le contenu des info-bulles
Dans cet exemple, nous ajoutons du contenu personnalisé aux info-bulles en ajoutant une colonne à la table de données et en la marquant avec le rôle Info-bulle.
Remarque : Cela n'est pas compatible avec la visualisation Graphique à bulles.
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); }
Utiliser les info-bulles HTML
Cet exemple s'appuie sur le précédent en activant les info-bulles HTML. Notez l'ajout de tooltip.isHtml: true
aux options du graphique.
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); }
Ce n'est pas très différent, mais nous pouvons maintenant personnaliser le code HTML.
Personnaliser le contenu HTML
Les exemples précédents ont tous utilisé des info-bulles avec du contenu en texte brut, mais la vraie puissance des info-bulles HTML se manifeste lorsque vous pouvez les personnaliser à l'aide du balisage HTML. Pour cela, vous devez effectuer les deux opérations suivantes:
-
Spécifiez
tooltip.isHtml: true
dans les options du graphique. Cela indique au graphique de dessiner les info-bulles en HTML (par opposition à SVG). -
Marquez une colonne entière ou une cellule spécifique dans le tableau de données avec la propriété personnalisée
html
. Voici une colonne de données avec le rôle d'info-bulle et la propriété HTML :
dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}})
Remarque:Cela ne fonctionne pas avec la visualisation Graphique à bulles. Le contenu des info-bulles HTML du graphique à bulles n'est pas personnalisable.
Important : Assurez-vous que le code HTML inclus dans vos info-bulles provient d'une source fiable.
Si le contenu HTML personnalisé contient du contenu généré par l'utilisateur, il est essentiel d'échapper ce contenu. Sinon, vos superbes visualisations peuvent être ouvertes aux attaques XSS.
Pour personnaliser le contenu HTML, il suffit d'ajouter une balise <img>
ou de mettre du texte en gras:
Le contenu HTML personnalisé peut également inclure du contenu généré dynamiquement. Ici, nous ajoutons une info-bulle contenant une table générée dynamiquement pour chaque valeur de catégorie. Étant donné que l'info-bulle est associée à la valeur de la ligne, pointez sur l'une des barres pour afficher l'info-bulle HTML.
Cet exemple montre comment une info-bulle HTML personnalisée peut être associée à une colonne de domaine. (Dans les exemples précédents, il était associé à une colonne de données.) Pour activer l'info-bulle sur l'axe du domaine, définissez l'option focusTarget: 'category'
.
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>'; }
Info-bulles en rotation
Il est possible d'alterner les info-bulles dans Google Charts avec le CSS. Dans le graphique ci-dessous, les info-bulles sont orientées de 30° vers la droite à l'aide de ce CSS intégré, juste avant l'élément div du graphique:
<style>div.google-visualization-tooltip { transform: rotate(30deg); }</style>