Interfejs API wizualizacji Google - Skumulowany wykres słupkowy - niestandardowa podpowiedź

Question

Próbuję uzyskać niestandardową podpowiedź dla wykresu słupkowego.

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); 

Moje pytanie brzmi: jak utworzyć etykietkę narzędzi dla każdego: _1, _2, _3, _4?

Dzięki

Answer 1

to jest opisane w dokumentacji Google pod DataTable Roles

W dokumentacji wykres słupkowy, wyjaśnia, które role są dostępne dla tego wykresu here

Co trzeba zrobić, to dodać dodatkowy kolumny do twoich danych z dodaną opcją {rolka: podpowiedź}, z tą kolumną pokazującą treść podpowiedzi.

Na przykład:

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'] 
    ]); 

Ostateczny kod będzie wyglądać następująco:

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"}} 
    ); 
} 

Zobacz przykład here.