我正在尝试使Google Charts显示具有完整HTML的自定义工具提示。
我知道如何启用工具提示并传递适当的数据 - 问题是 - 即使启用了allowHTML选项，工具提示也会呈现为纯文本，因此例如我无法在工具提示中显示图片。
这是我想要实现的一个小例子：
我现在拥有的：
我想要的：
解决此问题的一种方法是禁用工具提示，捕获onmouseover事件，并使用另一个库（例如cluetip）在光标处显示工具提示，但是我想知道是否有更干净，原生的方法来启用 Google Charts 中的这种功能。
请还请查看我的关于图像作为谷歌图表中点标记的另一个问题。
编辑：
与此同时，我发现了一个非常好且相当便宜（每个网站许可证60美元）的库，可涵盖此功能：Highcharts库
正如您在示例中看到的那样，可以传递一个格式化工具提示的函数 - 足够容易，我们可以为每个数据点添加一个特殊属性，其中包含可用于动态加载工具提示内容的URL。然后，可以通过向系列中的每个数据点添加额外属性来缓存工具提示。我已按此方式实现它，并且完全有效。
希望最新的编辑能帮助某人。
谷歌在这里给出了一个例子here。
您需要指定要作为HTML工具提示的列：
data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
您还需要向图表传递正确的选项：
tooltip: {isHtml: true}
这个功能非常难以理解！对我来说，如前所述，在使用'addColumn()'定义提示时，关键是添加", 'p': {'html': true}"；仅使用'draw()'选项'tooltip: {isHtml: true}'是不够的。
在创建传递给'addRows()'的'graphItems'数组时，使用函数调用返回HTML字符串非常方便：
function myToolTip(row) {
return '<div style="white-space: nowrap; padding:5px;"><b>' + row.name + '</b><br>' +
'$' + row.worth + ' B, <b>' + _scope.sortBy + '</b>: ' + row[_scope.sortBy] + '</div>';
}
var graphItems = [];
angular.forEach(_scope.ForbesList, function(row, key) {
graphItems.push([key, row.worth, myToolTip(row)]);
});
var data = new google.visualization.DataTable();
data.addColumn('number', 'Rank');
data.addColumn('number', 'Worth');
data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
data.addRows(graphItems);
更多内容请见：https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#custom_html_content
以下是目前我正在使用的方法：
步骤1：确保您的图表选项中都有这两个设置：
// This line makes the entire category's tooltip active.
focusTarget: 'category',
// Use an HTML tooltip.
tooltip: { isHtml: true }
dataTable.addColumn({'type': 'string', 'role': 'tooltip' , 'p': {'html': true}});
chartReading.push(chartSensorTooltip(obsDate, reading[1]));
"chartSensorTooltip(date, number)"是我自己编写的JS方法，用于正确格式化每个值的工具提示HTML。您不需要编写此类方法，但正如上面的某人建议的那样，这样做可以非常轻松地将所有工具提示以相同的方式进行格式化。
FocusTarget是让我困惑的东西。希望对某些人有帮助！
我不得不在每行数据中添加{p: {html: true}}而不是列，以及整个图表的isHtml选项。