15

我正在尝试让 Google Charts 显示包含完整 HTML 的自定义工具提示。

我知道如何启用工具提示并传递适当的数据-问题是-即使allowHTML启用了选项，工具提示也会呈现为纯文本，因此例如我无法在工具提示中显示图片。

这是我要做什么的一个小例子：

我现在拥有的：工具提示中的纯文本

我想要的是：工具提示中的图片

解决此问题的一种方法是禁用工具提示，捕获 onmouseover 事件并使用另一个库（如线索提示）在光标处显示工具提示，但我想知道是否有更清洁、本机的方式来启用 Google Charts 中的这种功能。

另外请查看我关于图像作为谷歌图表中的点标记的其他问题。

编辑：

与此同时，我发现了一个非常好且相当便宜（每个网站许可 60 美元）的库，它涵盖了这个功能：Highcharts 库

正如您在示例中看到的，可以传递一个格式化工具提示的函数 - 我们可以很容易地为每个数据点添加一个特殊属性，其中包含一个可用于动态加载工具提示内容的 url。然后可以通过向系列中的每个数据点添加额外的属性来缓存工具提示。我已经以这种方式实现了它，并且效果很好。

希望最新的编辑对某人有所帮助。

4

4 回答 4

30

谷歌在这里举了一个例子。

您需要将列指定为 html 工具提示：

data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});

您还需要将正确的选项传递给您的图表：

tooltip: {isHtml: true}

我已经用折线图对此进行了测试，并且可以正常工作。

编辑：看起来（至少对于折线图）你必须使用图表包装器才能工作。如果没有包装器，我无法让它遵守选项。

于 2012-11-16T16:51:39.080 回答
6

这个功能非常模糊！如前所述，对我来说，关键是在使用 '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

于 2015-01-27T19:53:03.747 回答
3

这目前对我有用：

第 1 步：确定这两个设置都在您的图表选项中：

// This line makes the entire category's tooltip active.
focusTarget: 'category',
// Use an HTML tooltip.
tooltip: { isHtml: true }

第 2 步：将您的工具提示添加到图表列之一：

dataTable.addColumn({'type': 'string', 'role': 'tooltip' , 'p': {'html': true}});

第 3 步：在您的数据中，在相应列中添加工具提示的 HTML：

chartReading.push(chartSensorTooltip(obsDate, reading[1]));

方法“chartSensorTooltip(date, number)”是我自己编写的一种 JS 方法，用于为每个值的工具提示正确格式化 HTML。您不需要编写这种方法，但正如上面有人建议的那样，这样做可以很容易地以相同的方式格式化所有工具提示。

FocusTarget 的事情让我大吃一惊。有人！

于 2016-06-30T15:10:05.817 回答
2

我必须添加{p: {html: true}}到每一行数据而不是列，以及isHtml整个图表的选项。

于 2017-12-26T07:25:19.450 回答