我想在悬停工具提示中嵌入 html 代码。 这是一个工作示例:
plotly::plot_ly(
type = "pie",
labels = "A",
hovertext = '<i>text in italics</i>', # Renders text in italics
hoverinfo = "text"
)
通过以斜体呈现文本,此 reprex 似乎工作得很好。 但是,更复杂的 html 代码似乎无法呈现为 html,而是呈现为纯文本。 就我而言,我想要在工具提示中嵌入图像,如下所示:
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
,就此而言,两者的工作方式相同(:
呈现为纯文本的值:
'<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>'),
可以肯定的是,第一个呈现为"斜体
使工具提示根本不起作用的值:
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代码是如何嵌入的。
GDLMX 解决方案在这里也给出了一些可能有帮助的想法。 但是,我的代码必须生成静态 html 输出,所以我不能依赖 Shiny。
鲍勃的《你的叔叔》似乎找到了d3热图的解决方案,如果我没记错的话,它是在D3上构建的。不过,我对javascript并不熟悉,我不确定我是否可以很好地遵循他的代码,或者他的解决方案是否也适用于绘图工具提示。
正如Brandon Bertelsen在这里解释的那样,DT::datatable
有一个可以设置为FALSE
的escape
参数,以避免转义数据表中的html代码,从而正确呈现表中的html代码。据我所知,情节没有这样的东西。另外,我认为数据表不是建立在 D3 之上的(但我不是 100% 确定(。
关于如何解决这个问题的任何想法? 非常感谢!
您不能将任意 HTML (如<div>
、<code>
或<img>
(放入悬停标签中,只能将简单的格式标记放入
。今天 Plotly 源代码中允许的标签.js是<br>
、<sub>
、<sup>
、<b>
、<i>
、<em>