有没有办法在R中以绘图方式将html代码嵌入工具提示中? [英] Is there a way to embed html code inside tooltips in plotly with R?

问题描述

我想将html代码嵌入在悬停工具提示中. 这是一个工作示例:

I want to embed html code inside the plotly's on hover tooltip. Here is a working example:

plotly::plot_ly(
  type = "pie",
  labels = "A",
  hovertext = '<i>text in italics</i>', # Renders text in italics
  hoverinfo = "text"
)

通过以斜体显示文本，此reprex似乎工作得很好.但是，更复杂的html代码似乎无法呈现为html，而是呈现为纯文本. 就我而言，我想要的是在工具提示中嵌入一个图像，如下所示:

This reprex seems to work perfectly fine, by rendering the text in italics. However, more complex html code seems to fail to be rendered as html, and is instead rendered as plain text. In my case, what I want is to embed an image inside the tooltip, like the following:

plotly::plot_ly(
  type = "pie",
  labels = "A",
  hovertext = '<img src="https://cran.r-project.org/Rlogo.svg">', # Does not render as html
  hoverinfo = "text"
)

我尝试用于hovertext(或text的其他一些值，因为这两个函数都相同):

A few other values I have tried to use for hovertext (or for text, for this matter both work the same):

以纯文本形式呈现的值:

'<div><i>text in italics</i></div>'
'<div><img src="https://cran.r-project.org/Rlogo.svg"></div>',
'<img src="https://cran.r-project.org/Rlogo.svg">',
htmltools::HTML('<img src="https://cran.r-project.org/Rlogo.svg">'),
htmltools::HTML('<div><img src="https://cran.r-project.org/Rlogo.svg"></div>'),

可以肯定，第一个呈现为< div> 斜体文字</div>" (斜体行)

To be sure, the first one renders as "<div>text in italics</div>" (italics ok)

使工具提示根本不起作用的值:

htmltools::img(src="https://cran.r-project.org/Rlogo.svg")
htmltools::div(htmltools::img(src="https://cran.r-project.org/Rlogo.svg"))
htmltools::div('<img src="https://cran.r-project.org/Rlogo.svg">')

相关帖子和可能的解决方案:

在R中使用JavaScript悬停事件至少可以部分解决问题(我可以带有变化的图像，而不是显示的工具提示)；但是，此页面似乎已过时.另外，我不了解javascript代码的嵌入方式.

Hover Events with JavaScript in R could at least partially solve the problem (I could go with an image that changes instead of the tooltip showing up); however, this page seems to be outdated. Also, I don't get how the javascript code is embedded.

此处的gdlmx解决方案还提供了一些可能会有所帮助.但是，我的代码必须生成静态的html输出，因此我不能依赖Shiny.

gdlmx solution here gives also some ideas that may be helpful. However, my code must generate a static html output, so I cannot rely on Shiny.

鲍勃的叔叔似乎找到了d3heatmap的解决方案，如果我没记错的话，该解决方案是按原样在D3上构建的.不过，我对javascript不太熟悉，我不确定我能否很好地遵循他的代码，或者我不确定他的解决方案是否也适用于绘图工具提示.

Bob's Your Uncle seems to find a solution for d3heatmap, which if I'm not wrong is built over D3 as plotly is. I'm not that familiar with javascript though, and I'm not sure I can follow his code very well, or whether his solution would apply to plotly tooltips as well.

如

As explained by Brandon Bertelsen here, DT::datatable has a escape parameter that can be set to FALSE, to avoid escaping html code inside a datatable, thus rendering the html code inside the table properly. As far as I know, plotly doesn't have anything like that. Also, I think datatables is not built on top of D3 (but I'm not 100% sure).

有关如何解决此问题的任何想法?非常感谢！

Any ideas about how to solve this? Thanks so much!

推荐答案

您不能将诸如<div>或<code>或<img>之类的任意HTML放到hoverlabel中，而只能放置简单的格式标记.

You cannot put arbitrary HTML such as <div> or <code> or <img> into the hoverlabels, just simple formatting tags.

允许的标签今天Plotly.js 的来源是<br>，<sub>，<sup>，<b>，<i>，<em>

The allowed tags in the source of Plotly.js today are <br>, <sub>, <sup>, <b>, <i>, <em>

这篇关于有没有办法在R中以绘图方式将html代码嵌入工具提示中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！