Google Material 条形图：自定义工具提示

Question

从我在谷歌搜索中发现的内容来看，我猜我不会得到肯定的答案，但是嘿，也许你们中的一个人知道一些不常见的知识。

基本上，我是一个网站的管理员，该网站上有很多 Google 材料图表。我被要求更新其中一个图表，以便悬停工具提示显示实际数字和相对百分比值，但在谷歌搜索大约一个小时后，我到目前为止还没有找到解决方案。

https://jsfiddle.net/r2p00t4r/3/是一个小提琴，显示了我最近的尝试，这是一个绝望的尝试，遵循旧式谷歌图表的代码（https://developers.google.com/chart/交互/文档/customizing_tooltip_content#customizing-tooltip-content）

// Usually coming from ajax
var response = [
    {
        "detail": ">= rated CCA", "total_tests": "265", "in_vehicle": "236", "result_good": "237", "result_good_recharge": "28", "result_charge_retest": "0", "result_replace": "0", "result_badcell": "0", "in_balance": "140"
    },
    {
        "detail": "CCA within tolerance", "total_tests": "677", "in_vehicle": "561", "result_good": "543", "result_good_recharge": "133", "result_charge_retest": "0", "result_replace": "0", "result_badcell": "1", "in_balance": "292"
    },
    {
        "detail": "< rated CCA", "total_tests": "1419", "in_vehicle": "1133", "result_good": "141", "result_good_recharge": "780", "result_charge_retest": "114", "result_replace": "264", "result_badcell": "120", "in_balance": "52"
    }
];

google.charts.load('current', {'packages': ['corechart', 'bar']});
google.charts.setOnLoadCallback(function() {
    var chart = new google.charts.Bar(window.document.getElementById('chart')),
        data = new google.visualization.DataTable();

    data.addColumn('string', 'Rated CCA');
    data.addColumn('number', 'Total Tests');
    data.addColumn('number', 'In vehicle');
    data.addColumn({'type': 'string', 'role': 'tooltip'});
    data.addColumn('number', 'Good');
    data.addColumn({'type': 'string', 'role': 'tooltip'});
    data.addColumn('number', 'Good, recharge');
    data.addColumn({'type': 'string', 'role': 'tooltip'});
    data.addColumn('number', 'Charge and retest');
    data.addColumn({'type': 'string', 'role': 'tooltip'});
    data.addColumn('number', 'Replace');
    data.addColumn({'type': 'string', 'role': 'tooltip'});
    data.addColumn('number', 'Bad cell');
    data.addColumn({'type': 'string', 'role': 'tooltip'});
    data.addColumn('number', 'In balance');
    data.addColumn({'type': 'string', 'role': 'tooltip'});

    for(var i = 0; i < response.length; i++) {
        var row = [
            response[i].detail,
            parseFloat(response[i].total_tests),
            parseFloat(response[i].in_vehicle),
            response[i].in_vehicle + ' (' + (Math.round((response[i].in_vehicle / response[i].total_tests) * 10000) / 100) + '%)',
            parseFloat(response[i].result_good),
            response[i].result_good + ' (' + (Math.round((response[i].result_good / response[i].total_tests) * 10000) / 100) + '%)',
            parseFloat(response[i].result_good_recharge),
            response[i].result_good_recharge + ' (' + (Math.round((response[i].result_good_recharge / response[i].total_tests) * 10000) / 100) + '%)',
            parseFloat(response[i].result_charge_retest),
            response[i].result_charge_retest + ' (' + (Math.round((response[i].result_charge_retest / response[i].total_tests) * 10000) / 100) + '%)',
            parseFloat(response[i].result_replace),
            response[i].result_replace + ' (' + (Math.round((response[i].result_replace / response[i].total_tests) * 10000) / 100) + '%)',
            parseFloat(response[i].result_badcell),
            response[i].result_badcell + ' (' + (Math.round((response[i].result_badcell / response[i].total_tests) * 10000) / 100) + '%)',
            parseFloat(response[i].in_balance),
            response[i].in_balance + ' (' + (Math.round((response[i].in_balance / response[i].total_tests) * 10000) / 100) + '%)'
        ];

        data.addRow(row);
    }

    chart.draw(data, google.charts.Bar.convertOptions({
        'backgroundColor': 'transparent',
        'bars': 'horizontal',
        'chart': {
            'title': '',
            'subtitle': '',
        },
        'chartArea': {
            'backgroundColor': 'transparent'
        },
        'hAxis': {
            'title': 'No. of tests',
            'format': "#,###"
        },
        'vAxis': {
            'title': ''
        }
    }));
});