Google Charts - 工具提示中的完整 html [英] Google Charts - full html in tooltips

问题描述

我正在尝试让 Google 图表显示包含完整 HTML 的自定义工具提示.

I am trying to make Google Charts Display custom tooltips with full HTML in them.

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

I know how to enable tooltips and pass appropriate data - the problem is - even when allowHTML option is enabled, the tooltips are rendered as plain text, so for example I can't show a picture in the tooltip.

这里是我要做什么的一个小例子:

Here is a little example of what I am going for:

我现在拥有的:

我想要的:

解决这个问题的一种方法是禁用工具提示，捕获 onmouseover 事件并使用另一个库(如提示提示)在光标处显示工具提示，但我想知道是否有一种更干净的本地方式来启用这种功能谷歌图表.

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.

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

Also please check out my other question about images as point markers in google charts.

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

In the meantime I found a very good and quite inexpensive (60$ per website license) library that covers this functionality : Highcharts library

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

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.

希望最新的编辑对某人有所帮助.

Hope the latest edit will help someone.

推荐答案

Google 举例 此处.

Google gives an example here.

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

You will need to designate the column to be html tooltip:

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.

看起来(至少对于折线图)您必须使用 图表包装器 使其工作.没有包装器，我无法让它服从选项.

It also looks like (at least for line chart) you have to use the chart wrapper for this to work. I couldn't get it to obey the options without the wrapper.

这篇关于Google Charts - 工具提示中的完整 html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！