Javascript Google Charts - 工具提示中的完整 html
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11118920/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Charts - full html in tooltips
提问by JohnnyM
I am trying to make Google Charts Display custom tooltips with full HTML in them.
我正在尝试使 Google Charts 显示包含完整 HTML 的自定义工具提示。
I know how to enable tooltips and pass appropriate data - the problem is - even when allowHTMLoption is enabled, the tooltips are rendered as plain text, so for example I can't show a picture in the tooltip.
我知道如何启用工具提示并传递适当的数据 - 问题是 - 即使allowHTML启用了选项，工具提示也会呈现为纯文本，因此例如我无法在工具提示中显示图片。
Here is a little example of what I am going for:
这是我要做的一个小例子：
What I have now: 
我现在所拥有的：
What I want: 
我想要的是：
One way to solve this problem is to disable tooltips, capture onmouseover events and use another library (like cluetip) to display tooltips at cursor, but I was wondering if there is a cleaner, native way to enable this kind of functionality in Google Charts.
解决此问题的一种方法是禁用工具提示，捕获鼠标悬停事件并使用另一个库（如提示提示）在光标处显示工具提示，但我想知道是否有一种更简洁的原生方式可以在 Google Charts 中启用这种功能。
Also please check out my other question about images as point markers in google charts.
另请查看我关于图像作为谷歌图表中的点标记的其他问题。
Edit:
编辑：
In the meantime I found a very good and quite inexpensive (60$ per website license) library that covers this functionality : Highcharts library
与此同时，我发现了一个非常好而且相当便宜（每个网站许可证 60 美元）的库，它涵盖了这个功能：Highcharts 库
As you can see in the example it is possible to pass a function that will format the tooltips - easily enough we could add a special property to each datapoint containig an url that could be used to dynammically load the tooltips content. The tooltips can then be cached by adding an extra property to each data point in a serie. I've implemented it this way and it works perfectly.
正如您在示例中看到的那样，可以传递一个格式化工具提示的函数 - 我们可以很容易地向每个包含可用于动态加载工具提示内容的 url 的数据点添加一个特殊属性。然后可以通过向系列中的每个数据点添加额外的属性来缓存工具提示。我已经以这种方式实现了它并且它完美地工作。
Hope the latest edit will help someone.
希望最新的编辑会对某人有所帮助。
回答by dmeehl
Google gives an example here.
谷歌在这里给出了一个例子。
You will need to designate the column to be html tooltip:
您需要将列指定为 html 工具提示：
data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
You will also need to pass the correct option to your chart:
您还需要将正确的选项传递给您的图表：
tooltip: {isHtml: true}
I have tested this with line chart, and it works.
我已经用折线图对此进行了测试，并且有效。
Edit: It also looks like (at least for line chart) you have to use the chart wrapperfor this to work. I couldn't get it to obey the options without the wrapper.
编辑：看起来（至少对于折线图）你必须使用图表包装器才能工作。没有包装器，我无法让它服从选项。
回答by Joseph Oster
This feature was incredibly obscure! The key for me, as noted earlier, was adding ", 'p': {'html': true}" when using 'addColumn()' to define a tooltip; the 'draw()' option 'tooltip: {isHtml: true}' alone is not enough.
这个功能非常晦涩难懂！如前所述，对我来说，关键是在使用“addColumn()”定义工具提示时添加“, 'p': {'html': true}”；'draw()' 选项 'tooltip: {isHtml: true}' 单独是不够的。
It's very handy to use a function call to return the HTML string when creating the array of 'graphItems' that gets passed to 'addRows()':
在创建传递给“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);
More here: https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#custom_html_content
更多信息：https: //developers.google.com/chart/interactive/docs/customizing_tooltip_content#custom_html_content
回答by Blamkin86
This is currently working for me:
这目前对我有用：
Step 1: be certain BOTH of these settings are in your chart options:
第 1 步：确定这两个设置都在您的图表选项中：
// This line makes the entire category's tooltip active.
focusTarget: 'category',
// Use an HTML tooltip.
tooltip: { isHtml: true }
Step 2: add your tooltip one of the chart columns:
第 2 步：将您的工具提示添加到图表列之一：
dataTable.addColumn({'type': 'string', 'role': 'tooltip' , 'p': {'html': true}});
Step 3: In your data, add the HTML for your tooltip at the appropriate column:
第 3 步：在您的数据中，在相应列中添加工具提示的 HTML：
chartReading.push(chartSensorTooltip(obsDate, reading[1]));
The method "chartSensorTooltip( date, number)" is a JS method I wrote myself to properly format the HTML for each values' tool tip. You don't need to write this sort of method, but as someone above suggested, doing so makes it very easy to format all the tooltips the same way.
方法“chartSensorTooltip(date, number)”是我自己编写的一种 JS 方法，用于为每个值的工具提示正确格式化 HTML。您不需要编写这种方法，但正如上面有人建议的那样，这样做可以很容易地以相同的方式设置所有工具提示的格式。
The FocusTarget thing is what tripped me up. HTH someone!
FocusTarget 的事情让我绊倒了。某人！
回答by Ryo
I had to add {p: {html: true}}to each row data instead of column, as well as isHtmloption for the whole chart.
我必须添加{p: {html: true}}到每一行数据而不是列，以及isHtml整个图表的选项。
