Google Charts - 工具提示中的完整html

Question

我正在尝试制作带有完整HTML的Google Charts Display自定义工具提示.

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

这是我想要的一个小例子:

我现在拥有的:

我想要的是:

解决此问题的一种方法是禁用工具提示,捕获onmouseover事件并使用另一个库(如cluetip)在光标处显示工具提示,但我想知道是否有更简洁,本机的方式在Google Charts中启用此类功能.

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

编辑:

与此同时,我发现了一个非常好且相当便宜(每个网站许可证60美元)的库,它涵盖了这个功能:Highcharts库

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

希望最新的编辑能帮助某人.

Answer 1

谷歌给出了一个例子在这里.

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

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

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

tooltip: {isHtml: true}

我用折线图对它进行了测试,它确实有效.

编辑:它看起来(至少对于折线图)你必须使用图表包装器才能工作.没有包装器,我无法让它服从选项.

Answer 2

这个功能非常晦涩难懂！如前所述，对我来说，关键是在使用“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