API di visualizzazione Google - Grafico a barre in pila - Descrizione comando personalizzato

Question

Ho cercato di ottenere un suggerimento personalizzato per un grafico a barre in pila.

var data = new google.visualization.DataTable(); 
data.addColumn('string', 'Units'); 
data.addColumn('number', '1'); 
data.addColumn('number', '2'); 
data.addColumn('number', '3'); 
data.addColumn('number', '4'); 

_1 = 0.123 
_2 = 0.23 
_3 = 0.3 
_4 = 0 

data.addRow([_units, _1, _2, _3, _4,]); 

var options = { 
     isStacked: true, 
     height: 150, 
     chartArea: { height: 50 }, 
     legend: { position: 'top' }, 
}; 

bchart = new google.visualization.BarChart(bcontainer); 
bchart.draw(data, options); 

La mia domanda è quindi come creare un suggerimento per ciascuno: _1, _2, _3, _4?

Grazie

Answer 1

Questo è descritti nella documentazione di Google sotto DataTable Roles

Nella documentazione grafico a barre, si spiega quali ruoli sono disponibili per quel grafico here

Quello che dovete fare è aggiungere ulteriori colonne ai tuoi dati con il {ruolo: tooltip} aggiunto, con quella colonna che mostra quello che vuoi dire il suggerimento.

Per esempio:

var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Year'); 
    data.addColumn('number', 'Sales'); 
    data.addColumn({type: 'string', role: 'tooltip'}); 
    data.addColumn('number', 'Expenses'); 
    data.addColumn({type: 'string', role: 'tooltip'}); 
    data.addRows([ 
    ['2004', 1000, '1M$ sales in 2004', 400, '$0.4M expenses in 2004'], 
    ['2005', 1170, '1.17M$ sales in 2005', 460, '$0.46M expenses in 2005'], 
    ['2006', 660, '.66$ sales in 2006', 1120, '$1.12M expenses in 2006'], 
    ['2007', 1030, '1.03M$ sales in 2007', 540, '$0.54M expenses in 2007'] 
    ]); 

Il codice finale sarà simile a questa:

function drawVisualization() { 
    // Create and populate the data table. 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Year'); 
    data.addColumn('number', 'Sales'); 
    data.addColumn({type: 'string', role: 'tooltip'}); 
    data.addColumn('number', 'Expenses'); 
    data.addColumn({type: 'string', role: 'tooltip'}); 
    data.addRows([ 
    ['2004', 1000, '1M$ sales in 2004', 400, '$0.4M expenses in 2004'], 
    ['2005', 1170, '1.17M$ sales in 2005', 460, '$0.46M expenses in 2005'], 
    ['2006', 660, '.66$ sales in 2006', 1120, '$1.12M expenses in 2006'], 
    ['2007', 1030, '1.03M$ sales in 2007', 540, '$0.54M expenses in 2007'] 
    ]); 

    // Create and draw the visualization. 
    new google.visualization.BarChart(document.getElementById('visualization')). 
     draw(data, 
      {title:"Yearly Coffee Consumption by Country", 
      isStacked: true, 
      width:600, height:400, 
      vAxis: {title: "Year"}, 
      hAxis: {title: "Sales"}} 
    ); 
} 

vedere un esempio here.