plotly悬停标签颜色透明度

Question

是否可以格式化

hoverlabel

，使背景颜色透明并且可以通过标签看到绘图？

我可以将其设置为纯色，例如

hoverlabel = list(bgcolor = '#fff')

但是看起来如果我尝试添加透明度，颜色字符串的那部分会被忽略。与

bgcolor = 'rgba(255,255,255,0.05)'

相同，也不起作用。看起来标记有

opacity

设置，但悬停标签则没有。

谢谢！！

Answer 1

我发现（在plotly python中），如果你在

hovermode = "x unified"

中传递

layout

，那么如果你将

bgcolor

设置为包含透明度的某个

rgba

值，它确实有效！我不知道 R 代码，但应该很容易弄清楚。这就是它的样子（我觉得很恶心！）-

这是（python）代码-

fig.update_layout(hovermode='x unified', legend=dict(title= None), hoverlabel=dict(bgcolor='rgba(255,255,255,0.75)',
                                                                                  font=dict(color='black')))

Answer 2

另一种方法是使用 CSS 选择器和

www

文件夹中的 css 文件，并将 css 包含在

ui.R

文件中，如下所示

这种方法允许您为每个标签设置颜色变量，与接受的答案中的硬代码进行比较。

 dashboardBody(
   # use the css to set opacity of hover label - here I use tag$head in shinydashboard
   tags$head(
     tags$link(rel = "stylesheet", type = "text/css", href = "styles.css")
   )
   # more code here ...
)

# this file located in www/styles.css
g.hovertext > path {
  opacity: .6;
}

这种方法将导致页面上的每个悬停文本都获得不透明度设置，而不是一个特定的绘图。对于特定的绘图，需要对选择器进行一些额外的工作。

---

编辑：可重现的示例：

library(shiny)
library(plotly)

ui <- fluidPage(
  tags$style(HTML("g.hovertext > path {opacity: .6;}")),
  plotlyOutput("myPlot")
)

server <- function(input, output, session) {
  output$myPlot <- renderPlotly({
    plot_ly(x = 1:10, y = 1:10, type = "scatter", mode = "lines")
  })
}

shinyApp(ui, server)

Answer 3

我手动添加了此 CSS 作为解决方法，以使悬停框的不透明度为 40%，绘图上的悬停文本的不透明度为 100%。

<style>.hovertext { fill-opacity: 0.4; stroke-opacity: 1; }</style>