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

问题描述

我想让Google Charts在其中显示自定义工具提示，其中包含完整的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事件，并使用另一个库（如cluetip）在光标处显示工具提示，但我想知道是否有一个更干净，本地的方式来启用这种Google Charts中的功能。

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图表中的点标记。

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

：

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

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

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

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.

推荐答案

此处的示例。

您需要将列指定为html tooltip：

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.

编辑：它也看起来像（至少对于折线图），你必须使用< =https://google-developers.appspot.com/chart/interactive/docs/reference#chartwrapperobject>图表包装，以使其工作。我不能让它服从没有包装器的选项。

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图表 - 工具提示中的完整html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！