Google Chart Show Column Tooltips

Question

Я хочу, чтобы моя подсказка показывать оба заголовки столбцов

function drawChart() { 
    var sample_data = document.getElementById('sample_data').value; 
    var data2 = eval("["+sample_data+"]"); 
    var data = new google.visualization.DataTable(); 
    data.addColumn('number', 'Age'); 
    data.addColumn('number', 'Savings'); 
    data.addRows(data2); 


    var options = { 
     hAxis: {title: 'Age', minValue: 0,maxValue:105}, 
     vAxis: {title:'Savings',minValue:0,maxValue:2500000, format:'\u00A4 ,##0.00'}, 
     width: 960, height: 300, 
     colors: ['#4a82bd'], 
     legend:'none' 


    }; 

    var formatter = new google.visualization.NumberFormat(
     {prefix: '$'}); 
    formatter.format(data, 1); // Apply formatter to second column 

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 



} 

Как вы можете видеть, у меня есть две колонок и в настоящее время, когда я парить на мою карту единственным, что я вижу, это название Savings , Как я могу настроить свою всплывающую подсказку для отображения обоих названий?

Answer 1

Чтобы добавить другое название столбца во всплывающую подсказку, вам нужно будет использовать пользовательские HTML-подсказки, используя tooltip column role. У вас может быть DataView для автоматического создания всплывающих подсказок:

var view = new google.visualization.DataView(data); 
view.setColumns([0, 1, { 
    type: 'string', 
    role: 'tooltip', 
    calc: function (dt, row) { 
     // create a simple HTML tooltip 
     var age = dt.getFormattedValue(row, 0); 
     var savings = dt.getFormattedValue(row, 1); 
     return '<div><b>Age:</b> ' + age + '<br /><b>Savings:</b> ' + savings + '</div'>'; 
    } 
}]); 

chart.draw(view, { 
    // options 
    tooltip: { 
     isHtml: true 
    } 
});