google-visualization - 谷歌图表显示列工具提示

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



}

如您所见，我有两列，目前当我将鼠标悬停在图表上时，我唯一看到的是储蓄标题。如何自定义工具提示以显示两个标题？

Answer 1

要将其他列名称添加到工具提示，您需要使用自定义 HTML 工具提示，使用工具提示列角色。您可以使用 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
    }
});