Google visualization API - Biểu đồ thanh xếp chồng - Chú giải công cụ tùy chỉnh

Question

Tôi đã cố gắng nhận chú giải công cụ tùy chỉnh cho biểu đồ thanh xếp chồng.

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

Câu hỏi của tôi là cách tạo chú giải công cụ cho mỗi: _1, _2, _3, _4?

Cảm ơn

Answer 1

này được đề cập trong các tài liệu của Google dưới DataTable Roles

Trong tài liệu Chart Bar, nó giải thích mà vai trò có sẵn cho biểu đồ mà here

Những gì bạn cần làm là bổ sung thêm các cột vào dữ liệu của bạn với {role: tooltip} được thêm vào, với cột đó hiển thị những gì bạn muốn chú giải công cụ nói.

Ví dụ:

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

Mã cuối cùng sẽ trông như thế này:

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

Xem ví dụ here.