在 Google 图表中定义工具提示模板

Question

我正在使用 Google 图表堆叠图来显示我的数据，我想更改默认工具提示，我想做的唯一更改是删除下图中标记的数据：

我尝试阅读有关角色类型的信息，并且确实找到了一种方法，但由于我必须使用两倍多的列，它使代码变得一团糟。

而不是写这种简单的格式：

var legend = ['School', 'A', 'B', 'C', 'D', 'E', 'F', 'G'];

var line = ['line', 0.05, 0.10, 0.20, 0.33, 0.05, 0.12, 0.15];

我用：

var legend = ['School', 'A', {type: 'string' , role: 'tooltip'}, 'B', {type: 'string' , role: 'tooltip'}, 'C', {type: 'string' , role: 'tooltip'}, 'D', {type: 'string' , role: 'tooltip'}, 'E', {type: 'string' , role: 'tooltip'}, 'F', {type: 'string' , role: 'tooltip'}, 'G', {type: 'string' , role: 'tooltip'}];

var line = ['line', 0.05, 'A' , 0.10, 'B' ,0.20, 'C', 0.33, 'D', 0.05 , 'E', 0.12, 'F' , 0.15, 'G'];

这里一定有一个更简单的选项，也许是一种定义工具提示模板的方法？我错过了什么？

请查看JSFiddle。

HTML：

<div id="chartdiv"></div>
<button onclick='DrawChart();'>Draw Chart</button>

CSS：

#chartdiv{
    height: 400px;
    overflow-x: hidden;
    overflow-y: scroll;
    border: solid;
}

JS：

google.load("visualization", "1", { packages: ["corechart"] });
// create legend
var legend = ['School', 'A', {type: 'string' , role: 'tooltip'}, 'B', {type: 'string' , role: 'tooltip'}, 'C', {type: 'string' , role: 'tooltip'}, 'D', {type: 'string' , role: 'tooltip'}, 'E', {type: 'string' , role: 'tooltip'}, 'F', {type: 'string' , role: 'tooltip'}, 'G', {type: 'string' , role: 'tooltip'}];
// create table
var dataTable = [legend];
// create line
var line = ['line', 0.05, 'A' , 0.10, 'B' ,0.20, 'C', 0.33, 'D', 0.05 , 'E', 0.12, 'F' , 0.15, 'G'];

function DrawChart() {
    dataTable.push(line);
    console.warn("here");


    var data = google.visualization.arrayToDataTable(dataTable);
    var view = new google.visualization.DataView(data);

    var options_fullStacked = {
        isStacked: 'percent',
        legend: { position: 'top', maxLines: 3 },
        height: '100%',
        width: 615,
        bar: {  groupWidth: 50  },
        explorer: { keepInBounds: true },
        hAxis: {
            minValue: 0,
            ticks: [0, .25, .5, .75, 1]
        },

    };
    var chart = new google.visualization.BarChart(document.getElementById("chartdiv"));
    chart.draw(view, options_fullStacked);
}

更新：

我在将 HTML 添加到我的工具提示时也遇到了问题，我想将标签字体更改为粗体，但它也不起作用。

Answer 1

从性能的角度来看，这可能不是最佳的，但您可以考虑使用column Tooltip role 的以下方法：

google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);


function prepareDataTable(legend,lines){
    var data = [legend];
    data.push.apply(data, lines);
    var dataTable = google.visualization.arrayToDataTable(data);
    

    for(var i = 1; i < dataTable.getNumberOfColumns();i+=2){
        dataTable.insertColumn(i + 1, 'string', 'Tooltip'); //insert role Tooltip column
        dataTable.setColumnProperty(i + 1, 'role', 'tooltip');
        for(var j = 0; j < dataTable.getNumberOfRows();j++){
           dataTable.setValue(j,i+1,dataTable.getColumnLabel(i));
       }
    }
    return dataTable;
}


function drawChart() {
    var legend = ['School', 'A', 'B', 'C', 'D', 'E', 'F', 'G'];
    var lineFirst = ['FABDECG', 0.05, 0.10, 0.20, 0.33, 0.05, 0.12, 0.15];
    var lineSecond = ['CABDEFG', 0.15, 0.05, 0.20, 0.15, 0.12, 0.10, 0.35];
    
    var dataTable = prepareDataTable(legend,[lineFirst,lineSecond]);
    //var view = new google.visualization.DataView(dataTable);

    var options_fullStacked = {
        isStacked: 'percent',
        legend: { position: 'top', maxLines: 3 },
        height: '100%',
        width: 615,
        bar: { groupWidth: 50 },
        explorer: { keepInBounds: true },
        hAxis: {
            minValue: 0,
            ticks: [0, .25, .5, .75, 1]
        },
        tooltip: {
            isHtml: true
        }
    };
    var chart = new google.visualization.BarChart(document.getElementById("chartdiv"));
    chart.draw(dataTable, options_fullStacked);
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chartdiv"></div>