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

Question

我正在尝试制作带有完整HTML的Google图表显示自定义工具提示。

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

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

我现在拥有的内容：

我想要的是什么：

解决此问题的一种方法是禁用工具提示，捕获onmouseover事件并使用另一个库（如cluetip）在光标处显示工具提示，但我想知道是否有更清晰，本机的方式来启用此类功能谷歌图表。

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

修改

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

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

希望最新的编辑可以帮助某人。

Answer 1

Google举例here。

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

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

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

tooltip: {isHtml: true}

我用折线图对此进行了测试，结果正常。

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

Answer 2

这个功能令人难以置信地模糊不清！如前所述，对我来说，关键是在使用'addColumn（）'来定义工具提示时添加“，'p'：{'html'：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

Answer 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]));

方法＆＃34; chartSensorTooltip（日期，数字）＆＃34;是我自己写的一个JS方法，用于为每个值正确格式化HTML＆＃39;工具提示。你不需要编写这种方法，但正如上面提到的那样，这样做可以很容易地以同样的方式格式化所有工具提示。

FocusTarget是让我绊倒的事情。 HTH某人！

Answer 4

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