Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/35.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Css 在R范围内创建具有自定义绝对位置的图例_Css_R_Shiny_Leaflet_Legend - Fatal编程技术网

Css 在R范围内创建具有自定义绝对位置的图例

Css 在R范围内创建具有自定义绝对位置的图例,css,r,shiny,leaflet,legend,Css,R,Shiny,Leaflet,Legend,我正在用R制作一张网络地图,使用传单和闪亮。地图的右上角有一个absolutePanel,我想定位图例,使其不完全位于右上角,而是位于absolutePanel的左侧 传单仅接受四个角中的一个角作为addLegend标记中“位置”属性的有效输入。我之前已经在UI页面的标题中添加了自定义css标记,并且我一直在探索css文档来格式化图例,但是我无法找到正确的脚本来覆盖传单创建的图例位置。据我所知,这个位置是在传单.legend脚本的某个地方设置的 我更愿意在R脚本中解决这个问题,而不是修改它生成的

我正在用R制作一张网络地图,使用传单和闪亮。地图的右上角有一个absolutePanel,我想定位图例,使其不完全位于右上角,而是位于absolutePanel的左侧

传单仅接受四个角中的一个角作为addLegend标记中“位置”属性的有效输入。我之前已经在UI页面的标题中添加了自定义css标记,并且我一直在探索css文档来格式化图例,但是我无法找到正确的脚本来覆盖传单创建的图例位置。据我所知,这个位置是在
传单.legend
脚本的某个地方设置的

我更愿意在R脚本中解决这个问题,而不是修改它生成的web文档。还没有看到这个问题在其他任何地方得到解决。有谁能比我更精通css和Shinny吗?提前谢谢

简化的、可复制的示例脚本,尝试(不正确)为图例指定绝对位置:

library(shiny)
library(leaflet)

data = data.frame(x = c(1,2,3), y = c(1,2,3))

ui <- fluidPage(
  tags$head(tags$style(
    type = "text/css",
    "#controlPanel {background-color: rgba(255,255,255,0.8);",
    ".leaflet .legend {
    position = absolute;
    top = 10px;
    right = 100px;}"
  )),

  leafletOutput(outputId = "map", width="100%"),
  absolutePanel(top = 10, right = 10, height = 100, id = "controlPanel",
                strong("Put Legend To the Left of Me"))
)

server <- function(session, input, output) {

  output$map <- renderLeaflet({
    leaflet() %>%
      addMarkers(data = data, lat = data$x, lng = data$y) %>%
      addLegend(colors = data$x, labels = data$y, title = "Legend")
  })  
}

shinyApp(ui, server)
库(闪亮)
图书馆(单张)
数据=数据帧(x=c(1,2,3),y=c(1,2,3))

ui有一些简单的CSS来纠正您的位置,但这是高度构造的

首先,代码段中的CSS无效(第一条规则中没有结束的花括号)。但我想,位置本身很难维持,因为绝对位置总是如此。但是,您可以调整边距(右侧,如果需要,也可以顶部)以移动相应的面板。请注意,这将始终是绝对基于像素的。您的
控制面板
和图例面板将永远不会位于同一个
div
,因此将永远不会以自然方式相互调整。这就是为什么您最好在
contentPanel
上固定宽度,以避免在字体大小不同时出现重叠

library(shiny)
library(leaflet)

data = data.frame(x = c(1,2,3), y = c(1,2,3))

ui <- fluidPage(
  tags$head(tags$style(
    type = "text/css",
    "#controlPanel {background-color: rgba(255,255,255,0.8);}",
    ".leaflet-top.leaflet-right .leaflet-control {
      margin-right: 210px;
    }"
  )),

  leafletOutput(outputId = "map", width="100%"),
  absolutePanel(top = 10, right = 10, height = 100, width=210, id = "controlPanel",
                strong("Put Legend To the Left of Me"))
  )

server <- function(session, input, output) {

  output$map <- renderLeaflet({
    leaflet() %>%
      addMarkers(data = data, lat = data$x, lng = data$y) %>%
      addLegend(colors = data$x, labels = data$y, title = "Legend")
  })  
}

shinyApp(ui, server)
库(闪亮)
图书馆(单张)
数据=数据帧(x=c(1,2,3),y=c(1,2,3))

ui太棒了,这就是我想要的。非常感谢。调整边距(关于事物在地图上的显示方式)是否会产生任何潜在问题?试着这样做,看起来其他一切都像以前一样出现了。@BGroza图例面板似乎相当独立。所以其他一切都是一样的。如果你是个古玩,试试一些极端值,看看是否会出现一些问题。