Aggiungi testo personalizzato a Google Visualization tooltip

Question

Ho bisogno di aggiungere un'altra riga di testo su ciascuna delle descrizioni che sto visualizzando (su un grafico ad area). Ho incluso uno screenshot per illustrare ciò che spero di fare.

La mia tabella corrente: La tabella con il testo aggiuntivo aggiunto. (Questo è quello che sto cercando di fare):

Spero di farlo senza dover utilizzare un JS di terze parti per suggerimenti personalizzati. C'è un modo per aggiungere semplicemente un'altra riga di contenuto testuale da visualizzare nelle descrizioni dei comandi predefinite?

Qualsiasi aiuto è molto apprezzato.

Answer 1

Dai un'occhiata alla https://developers.google.com/chart/interactive/docs/roles#whatrolesavailable:

Ulteriori filari tooltip sono quello che stai cercando!

L'esempio:

 
label: 'Year', 'Sales', null, 'Expenses', null 
role: domain,  data, tooltip, data,  tooltip  
     '2004', 1000, '1M$ sales,  400, '$0.4M expenses 
          in 2004'     in 2004' 
     '2005', 1170, '1.17M$ sales, 460, '$0.46M expenses 
          in 2005'     in 2005' 
     '2006',  660, '.66$ sales, 1120,  '$1.12M expenses 
          in 2006'     in 2006' 
     '2007', 1030, '1.03M$ sales, 540, '$0.54M expenses 
          in 2007'     in 2007' 

Answer 2

Se si abilita focusTarget: 'category' nelle opzioni. Quindi la colonna tooltip diventa value per la descrizione comandi degli attuali punti x, (che viene reso come desiderato). Quindi puoi imitare lo value e aggiungere il testo aggiuntivo che desideri. Ecco un esempio quello che voglio dire: -

google.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,'600: 15% growth'], 
     ['2011', 1500, '1500: 50% growth'], 
     ['2012', 800, '800: -40% growth'], 
     ['2013', 1000, '1000: 25% growth'] 
    ]); 

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

Answer 3

non ho trovato un modo per aggiungere un'altra riga di dati per le descrizioni dei comandi predefiniti. Puoi avvicinarti a ciò che stai cercando utilizzando le descrizioni HTML. Però perdi la coda sul suggerimento. Ecco un JSbin con la soluzione che ho usato ... http://jsbin.com/tovizukabu/3/edit?css,js,output

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'); 
    dataTable.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}}); 
    dataTable.addColumn('number', 'Expense'); 
    dataTable.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}}); 

    dataTable.addRows([ 
     ['2010', 1500, '<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Sales: <strong>$600</strong></div>', 600,'<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Expense: <strong>$600</strong></div>'], 
     ['2011', 500, '<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Sales: <strong>$600</strong></div>', 1500, '<div><strong>2011</strong><br>Date: <strong>00/00/0000</strong><br>Expense: <strong>$1,500</strong></div>'], 
     ['2012', 1200, '<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Sales: <strong>$600</strong></div>', 800, '<div><strong>2012</strong><br>Date: <strong>00/00/0000</strong><br>Expense: <strong>$800</strong></div>'], 
     ['2013', 500, '<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Sales: <strong>$600</strong></div>', 1000, '<div><strong>2013</strong><br>Date: <strong>00/00/0000</strong><br>Expense: <strong>$1,000</strong></div>'] 
    ]); 

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

E il CSS ...

.google-visualization-tooltip { 
border: solid 1px #bdbdbd; 
border-radius: 2px; 
background-color: white; 
position: absolute; 
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.6); 
font-size: 11px; 
-moz-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.6); 
-webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.6); 
font-family: arial; 
} 

.google-visualization-tooltip div { 
    padding:5px; 
}