Javascript 打印轴标题上的工具提示
我想在绘图图形的轴标题上有一个工具提示 以下是我的尝试:Javascript 打印轴标题上的工具提示,javascript,r,shiny,plotly,r-plotly,Javascript,R,Shiny,Plotly,R Plotly,我想在绘图图形的轴标题上有一个工具提示 以下是我的尝试: 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").att
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")
)
)
}
)
x注意:很遗憾,我还没有解决您的问题,但希望这些信息对您有所帮助。祝你好运
背景:SVG
plotly
将绘图创建为(
)
的工具提示必须作为
应该是其父级的
需要添加新的
元素
SVG工具提示:矩形与绘图x轴
作为概念证明,我在示例中添加了一个
矩形。然后,我使用JS添加了一个
元素作为
元素的第一个子元素,该元素在矩形上生成一个工具提示
但是,尽管将
元素添加到x轴标题容器中,但对绘图热图执行相同的步骤不会在x轴标题上生成工具提示
代码
library(shiny)
library(plotly)
x <- y <- 1:10
dat <- expand.grid(x=x, y=y)
dat <- transform(dat, z=x*y)
### Create a <svg> rectangle element
testRect <- '<svg width="250" height="75" xmlns="http://www.w3.org/2000/svg">
<g class="test-rect">
<rect x="10" y="10" width="200" height="50"
style="fill:wheat; stroke:blue; stroke-width:1px"/>
</g>
</svg>'
### Add a first child title element to the rectangle <svg>
### Hovering over the rectangle displays the tooltip
jscode_testRect <- '$(document).ready(function(){
setTimeout(function(){
var titleRect = document.createElementNS("http://www.w3.org/2000/svg", "title");
titleRect.textContent = "rectangle tooltip";
var testRect = document.getElementsByClassName("test-rect")[0];
testRect.insertBefore(titleRect, testRect.childNodes[0]);
}, 500);
});'
### Add a first child title element to the SVG
### Hovering over the x-axis title doesn't display tooltip
jscode_xaxisPlotly <- '$(document).ready(function(){
setTimeout(function(){
var titleAxis = document.createElementNS("http://www.w3.org/2000/svg", "title");
titleAxis.textContent = "x-axis tooltip";
var gXtitle = document.getElementsByClassName("g-xtitle")[0];
gXtitle.insertBefore(titleAxis, gXtitle.childNodes[0]);
}, 500);
});'
shinyApp(
ui <- fluidPage(
tags$head(tags$script(HTML(jscode_testRect))),
tags$head(tags$script(HTML(jscode_xaxisPlotly))),
h4("<svg> rectangle - tooltip is functional"),
tags$div(HTML(testRect)),
h4("plotly heatmap - tooltip does not work"),
plotlyOutput("heatmap"),
br(),
br()
),
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"),
title = "Title"
)
)
}
)
库(闪亮)
图书馆(绘本)
我认为你的代码有几个问题:
我不喜欢它的SVG代码被编辑。即使您针对的是正确的元素,Plotly可能会立即删除您添加的内容
您缺少启用工具提示应用程序的代码
当我想在记号标签上添加工具提示时,我遇到了一个非常类似的问题。我花了相当长的时间用自定义CSS和JS来破解它。这样做的目的是添加一个div(矩形),它完美地覆盖了要使用工具提示来丰富的元素。然后将该矩形的CSSopacity
设置为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);
}
"
)
})
}
)
x我没有试着理解你的代码,只是测试了一下。它起作用了。干得好,谢谢!