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

Posted 2021-04-09

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

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

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

我现在拥有的：

我想要的是：

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

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

编辑：

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

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

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

答案

谷歌给出了一个例子here。

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

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

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

tooltip: {isHtml: true}

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

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

另一答案

这个功能令人难以置信地模糊不清！如前所述，对我来说，关键是在使用'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 }

第2步：添加工具提示其中一个图表列：

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

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

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

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

FocusTarget是让我失望的原因。 HTH有人！

另一答案

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