軸標題旁邊的工具提示

Question

賞金將在 2 天后到期。 此問題的答案有資格獲得+100聲望獎勵。 jxpython想引起對這個問題的更多關注。

目前，我正在使用rshiny制作一個儀表板，我在其中繪制圖表。 但是，我想知道是否有辦法在圖中的 X 和 Y 軸標題旁邊添加工具提示？

具體來說，在軸標題旁邊有一個問號或（類似的東西），最終用戶可以在其中單擊或懸停以查看對軸真正含義的更廣泛的描述。

像這樣的東西（雖然不起作用）：

layout(showlegend = FALSE,
       separators = ',.',
       xaxis = list(title = "Age", tooltip = "The age of every female above 50 years in the Unites States of America"))

Answer 1

不幸的是，我不知道一個包可以做到這一點，但您可以使用帶有 HTML 和 JS 的plotly將容器綁定到包含工具提示的標題：

編輯：添加 yaxis （這往往有點難）

df <- data.frame(a = 1:3,
                 b = 4:6)

jscode <- "
$(document).ready(function() {
    $(\"[data-toggle='tooltip']\").tooltip({container: 'body'}); 
});
"

csscode <- HTML('
    .plot-container {
        position: relative;
    }
    .xaxis-container {
        height: 20px;
        position:absolute;
        bottom: 0;
        left: 40px;
        background: #fff;
        opacity: 0.5;
    }
    .yaxis-container {
        width: 20px;
        position:absolute;
        bottom: 0;
        left: 5px;
        background: #fff;
        opacity: 0.5;
    }
    .xaxis-tooltip {
        width: 30px;
        height: 20px;
        background: #000;
        margin:auto;
    }
    .yaxis-tooltip {
        width: 20px;
        height: 30px;
        background: #000;
        margin:auto;
    }
')

library(shiny)
library(plotly)

ui <- fluidPage(
  tags$head(
    tags$script(jscode),
    tags$style(csscode)
  ),
  div(class = 'plot-container',
      plotlyOutput("plot"),
      div(
        class = "xaxis-container",
        div(class = "xaxis-tooltip", "data-toggle" = "tooltip", "title" = "x")
      ),
      div(
        class = "yaxis-container",
        div(class = "yaxis-tooltip", "data-toggle" = "tooltip", "title" = "y")
      )
  )
)

server = function(input, output) {
  output$plot <- renderPlotly({
    plot_ly() %>%
      add_trace(
        data = df,
        x =  ~ a,
        y =  ~ b,
        type = "scatter"
      ) %>%
      htmlwidgets::onRender("
          function(el, x) {
             var width = $('.draglayer')[0].getBoundingClientRect().width;
             var height = 0.5*$('.yaxis-tooltip')[0].getBoundingClientRect().height+$('.plot-container')[0].getBoundingClientRect().height-0.5*$('.draglayer')[0].getBoundingClientRect().height;
             $('.xaxis-container').css('width', width);
             $('.yaxis-container').css('height', height);
          }
        ")
  })
}

shinyApp(ui, server)

看起來像這樣：

您可以將不透明度更改為 0 以使容器不可見，這只是概念證明。