0

プロット グラフィックの軸タイトルにツールチップが必要です。

これが私の試みです：

x <- y <- 1:10
dat <- expand.grid(x=x, y=y)
dat <- transform(dat, z=x*y)

jscode <- '
$(document).ready(function(){
  setTimeout(function(){
    $($("#heatmap .g-xtitle text")[0]).attr("title", "hello").attr("data-toggle", "tooltip");
  }, 5000);
})
'

library(shiny)
library(plotly)
shinyApp(
  ui <- fluidPage(
    tags$head(tags$script(jscode)),
    plotlyOutput("heatmap")
  ),
  server = function(input, output){
    output$heatmap <- renderPlotly(plot_ly() %>%
      add_trace(data=dat, x=~x, y=~y, z=~z, type="heatmap") %>%
      layout(
        xaxis = list(title="foo") 
      )
    )
  }
)

JS コードは、期待どおりに属性data-toggleを設定しtitle、x 軸のタイトルのコンテナーに設定しますが、ツールヒントは表示されません。$($("#heatmap .g-xtitle text")[0]).tooltip()コンソールのようなことも試しましたが、何も起こりません。

4

2 に答える 2

1

あなたのコードにはいくつかの問題があると思います：

  1. SVGコードが編集されているのが好きではありません。適切な要素をターゲットにしていても、Plotly は追加した要素を即座に削除した可能性があります。
  2. アプリごとにツールチップを有効にするコードがありませんでした。

目盛りラベルにツールチップを配置したいときに、非常によく似た問題が発生しました。カスタム CSS と JS でハックするにはかなりの時間がかかりました。アイデアは、ツールチップで充実させたい要素を完全にオーバーレイする div (四角形) を追加することです。opacity次に、その長方形の CSS を 0 に設定して非表示にします。ただし、この四角形のツールチップは、ホバーすると機能します (非表示ですが)。これは、長方形の形状を視覚化するコードです。

x <- y <- 1:10
dat <- expand.grid(x = x, y = y)
dat <- transform(dat, z = x * y)

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

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

library(shiny)
library(plotly)
shinyApp(
    ui <- fluidPage(
        tags$head(
            tags$script(jscode),
            tags$style(csscode)
        ),
        div(class = 'plot-container',
            plotlyOutput("heatmap"),
            div(
                class = "xaxis-container",
                div(class = "xaxis-tooltip", "data-toggle" = "tooltip", "title" = "hello")
            )
        )
    ),
    server = function(input, output) {
        output$heatmap <- renderPlotly({
            plot_ly() %>%
                add_trace(
                    data = dat,
                    x =  ~ x,
                    y =  ~ y,
                    z =  ~ z,
                    type = "heatmap"
                ) %>%
                layout(xaxis = list(title = "foo")) %>%
                # We can't just center the rectangle relative to the entire plot area.
                # Instead, we need to do it relative to the draglayer.
                # This code sets proper width of .xaxis-container on app start.
                htmlwidgets::onRender(
                    "
                    function(el, x) {
                        var width = $('.draglayer')[0].getBoundingClientRect().width;
                        $('.xaxis-container').css('width', width);
                    }
                    "
                )
        })
    }
)

21 行目に変更opacity: 0.3;して、完全に機能するソリューションを作成します。opacity: 0;

于 2018-03-14T11:47:35.813 に答える