- Descrizione comando: introduzione
- Specificare il tipo di descrizione comando
- Descrizioni comandi standard
- Personalizzare i contenuti della descrizione comando
- Utilizzo delle descrizioni comando HTML
- Personalizzazione dei contenuti HTML
- Descrizioni comando della rotazione
- Inserire grafici nelle descrizioni comando
- Azioni della descrizione comando
- Annotazione dei dati
- Grafici supportati
Descrizione comando: introduzione
Le descrizioni comando sono le piccole caselle che si presentano quando passi il mouse sopra qualcosa. I biglietti da visita sono più generici e possono essere visualizzati ovunque sullo schermo; le descrizioni comando sono sempre collegate a qualcosa, ad esempio un punto su un grafico a dispersione o una barra su un grafico a barre.
Con questa documentazione imparerai a creare e personalizzare le descrizioni comando in Google Tables.
Specificare il tipo di descrizione comando
Google grafici crea automaticamente le descrizioni comando per tutti i grafici principali.
Il rendering sarà eseguito come SVG per impostazione predefinita, ad eccezione di IE 8, dove verrà visualizzato come VML. Puoi creare descrizioni comando HTML sui grafici principali specificando tooltip.isHtml: true
nelle opzioni di grafico trasmesse alla chiamata draw(), che ti consentirà anche di creare azioni descrizione comando.
Descrizioni comandi standard
In assenza di contenuti personalizzati, la descrizione comando viene generata automaticamente in base ai dati sottostanti. Puoi visualizzare la descrizione comando passando il mouse sopra una delle barre nel grafico.
Personalizzare i contenuti della descrizione comando
In questo esempio, aggiungiamo contenuti personalizzati alle descrizioni comandi aggiungendo una nuova colonna a DataTable e contrassegnandole con il ruolo descrizione comando.
Nota: questa funzionalità non è supportata dalla visualizzazione Grafico a bolle.
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); }
Utilizzo delle descrizioni comando HTML
L'esempio si basa su quello precedente attivando le descrizioni comando HTML. Osserva l'aggiunta di tooltip.isHtml: true
alle opzioni del grafico.
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); }
Non sembra molto diverso, ma ora possiamo personalizzare il codice HTML.
Personalizzare i contenuti HTML
Gli esempi precedenti hanno tutte le descrizioni comando utilizzate con contenuti di testo normale, ma il vero potere delle descrizioni comando HTML si verifica quando puoi personalizzarle utilizzando il markup HTML. Per attivare questa funzionalità, devi procedere in due modi:
-
Specifica
tooltip.isHtml: true
nelle opzioni del grafico. Questo indica al grafico di tracciare le descrizioni comando in HTML (anziché SVG). -
Contrassegna un'intera colonna o una cella specifica nella tabella dati con la proprietà personalizzata
html
. Una colonna di dati con il ruolo descrizione comando e la proprietà HTML sarebbe:
dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}})
Nota: questa operazione non funziona con la visualizzazione Grafico a bolle. I contenuti delle descrizioni comando HTML dei grafici a bolle non sono personalizzabili.
Importante: assicurati che l'HTML nelle descrizioni comando provenga da una fonte attendibile.
Se i contenuti HTML personalizzati includono contenuti generati dagli utenti, l'escape è fondamentale. In caso contrario, le splendide visualizzazioni potrebbero aprirsi agli attacchi XSS.
I contenuti HTML personalizzati possono essere semplici come aggiungere un tag <img>
o formattare il testo in grassetto:
I contenuti HTML personalizzati possono anche includere contenuti generati dinamicamente. Qui aggiungiamo una descrizione comando contenente una tabella generata dinamicamente per ogni valore di categoria. Poiché la descrizione comando è collegata al valore della riga, se passi il mouse sopra una delle barre verrà visualizzata la descrizione comando HTML.
Questo esempio mostra come è possibile associare una descrizione comando HTML personalizzata a una colonna di dominio. Negli esempi precedenti, era collegato a una colonna di dati. Per attivare la descrizione comando per l'asse del dominio, imposta l'opzione 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>'; }
Descrizione dei comandi in rotazione
Le descrizioni comando in Google Tables possono essere ruotate con il CSS. Nel grafico riportato di seguito, le descrizioni comando vengono ruotate di 30° in senso orario utilizzando questo CSS in linea immediatamente prima dell'elemento div del grafico:
<style>div.google-visualization-tooltip { transform: rotate(30deg); }</style>