修复 r 的绘图中悬停框的位置

Question

我有一个绘图生成的小部件，我需要将其嵌入到网页中。我必须嵌入它的小空间导致文本从悬停框偏移（见图）

增加网页上绘图的空间不是一个选项，减小悬停信息的字体大小也不是一个选项，它会变得不可读。

问题：如何锚定悬停框以始终显示在绘图的底部，以便悬停信息保留在框中？

我确实在网上搜索了一下，但没有成功。是否可以设置盒子的位置？

编辑： 这是一个示例代码，显示了如何创建绘图小部件。但请注意，您必须调整浏览器窗口的大小并使其变小，以便悬停框以这种奇怪的方式表现。

library(data.table)
library(ggplot2)
library(plotly)

dt.plot.data    <- data.table(value=90)

ggp <- ggplot(dt.plot.data, aes(1, y=value, fill="dummy", text="Info 1: foo<br>Info2: bar<br>date:<br>2018-05-30")) + 
        geom_bar(stat="identity") + ggtitle("Performance") + labs(y="%") + theme_bw() +
        scale_fill_manual(values=c("#EE68FD")) +
        theme(  
                plot.title=element_text(hjust=0.5), legend.position="none",
                axis.title.x=element_blank(), axis.line.y=element_line(color="black"),
                axis.text.x=element_blank(),
                panel.grid.major.x=element_blank(), panel.grid.minor.x=element_blank(),
                #panel.grid.major.y=element_line(linetype="dashed"), panel.grid.minor.y=element_line(linetype="dashed"),
                panel.border=element_blank(), axis.ticks.x=element_blank()
        )
#ggp

ply.yaxis       <- list(autorange=FALSE, range=c(0, 100))
ply.title       <- list(font=list(size=11), bordercolor="black", bgcolor="grey")
ply.hoverlabel  <- list(bordercolor="white", font=list(color="white", size=11))

ply <- ggplotly(ggp, dynamicTicks=TRUE, tooltip=c("y", "text")) %>% 
        layout(hoverlabel=ply.hoverlabel, yaxis=ply.yaxis) %>%
        config(displayModeBar=FALSE)
ply$sizingPolicy$padding <- 0
ply

Answer 1

这将使工具提示位于绘图的中心，我不确定这是否足以解决您的问题。

我没有了解您的绘图的后台发生的所有情况（例如，实际数据、闪亮代码等），因此，如果此工作有问题，请告诉我您所看到的内容。我可能只是需要更多信息。

此代码中发生了什么：

• 悬停：
  • Plotly 制作工具提示
  • 提示位置根据悬停位置进行修改
  • 工具提示被复制（盗）
  • Plotly 工具提示已关闭，被盗的深层副本已就位
• 悬停：
  • Plotly 工具提示已重新打开

我尝试对正在发生的事情发表评论，但如果您有任何疑问，请告诉我。

这使用了库

htmlwidgets

。

ply %>% 
  htmlwidgets::onRender(
    "function(el, x) {   /* replace tool tip if there is one, otherwise, ya, no */
      el.on('plotly_hover', function(d) {
        dd = document.querySelector('g.hoverlayer'); /* get hover house */
                                      /* find the mid, top of the house */
        newx = d.points[0].bbox.x0 + 1/2 * (d.points[0].bbox.x1 - d.points[0].bbox.x0);
        newy = d.points[0].bbox.y0;
        ht = document.querySelector('g.hovertext');      /* find tooltip */
                                                       /* center tooltip */
        ht.setAttribute('transform', 'translate(' + newx + ',' + newy + ')');
        hto = JSON.stringify(ht.outerHTML);            /* deep copy HTML */
        Plotly.restyle(el.id, {hoverinfo: 'none'});/* turn off Plotly TTs*/
        dd.innerHTML = JSON.parse(hto);   /* recreate TT w/o Plotly ctrl */
      });
      el.on('plotly_unhover', function() { /* turn on using y + text from plot */
        Plotly.restyle(el.id, {hoverinfo: 'y+text'}); /* turn Plotly TTs on */
      });
  }")

如果您想尝试将工具提示移至右侧，您可以更改以

newx

开头的行，而不是您可以使用

newx = d.points[0].bbox.x1;

的所有内容。