Google Charts - 工具提示中的完整html-Java 学习之路

我正在尝试使用完整的HTML制作Google图表显示自定义工具提示 .

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

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

我现在拥有的：

我想要的是：

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

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

Edit:

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

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

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

4 回答

0

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

回复于 2024-04-26T14:42:37+08:00

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

回复于 2024-04-26T14:42:37+08:00

3
谷歌给出了一个例子here .

您需要将列指定为html工具提示：
```
data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
```
您还需要将正确的选项传递给图表：
```
tooltip: {isHtml: true}
```
我用折线图测试了这个，它确实有效 .

编辑：它看起来也像（至少对于折线图）你必须使用chart wrapper才能工作 . 没有包装，我无法让它服从选项 .
回复于 2024-04-26T14:42:37+08:00
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是让我失望的原因 . HTH有人！
回复于 2024-04-26T14:42:37+08:00

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

4 回答

相关问题