时间戳

首页 > 解决方案 > 使用 html/css 在有光泽的绘图上放置标题

r - 使用 html/css 在有光泽的绘图上放置标题

问题描述

我有一个带有 wordcloud 图的示例应用程序，其中 wordcloud 没有标题选项。所以我试图在它上面放一个标题。我遇到了一些麻烦。这是示例应用程序：

df <- structure(list(key = c("Hello", "Okay", "Apple", "Orange", "Cheerios", 
"Today", "Tomorrow", "Water", "Steve", "Basket"), value = c(52L, 
51L, 25L, 21L, 20L, 12L, 12L, 12L, 11L, 9L)), row.names = c(57L, 
53L, 20L, 36L, 18L, 3L, 16L, 50L, 13L, 15L), class = "data.frame")

ui <- fluidPage(
  fluidRow(
    column(width = 6,
        HTML("<div>"),
        HTML("<h2 style='color:black; z-index: 9'>User Ranking</h2>"),
        wordcloud2Output("plot1", height = '500px')
        HTML("</div>")
    )
  )
)

server <- function(input, output, session) {
  output$plot1 <- renderWordcloud2({
      require('wordcloud2')
      data.frame(word = df$key, count = df$value) %>% wordcloud2(., size=.7, color='random-dark')

  })
}
shinyApp(ui, server)

如果我把标题放在第一位，情节就会向下移动。我希望情节与左上角的标题位于同一位置。我试图把它放在一个 div 中并更改标签的 z-index，但这并没有帮助。

在此处输入图像描述

标签： rshiny

解决方案

您可以放入style='position:absolute;'-tag<h*>来实现这一点。我不确定这是否是一个好主意，因为它可能会导致 wordcloud 内容和标题的过度绘制，但如果您确定该区域永远不会用于 wordcloud 内容，我想您可以这样做。

library(shiny)
library(wordcloud2)
library(tidyverse)

df <- structure(list(key = c("Hello", "Okay", "Apple", "Orange", "Cheerios", 
                         "Today", "Tomorrow", "Water", "Steve", "Basket"), 
                 value = c(52L, 51L, 25L, 21L, 20L, 12L, 12L, 12L, 11L, 9L)), 
            row.names = c(57L, 53L, 20L, 36L, 18L, 3L, 16L, 50L, 13L, 15L),
            class = "data.frame")

ui <- fluidPage(
  fluidRow(
    column(width = 6,
           HTML("<div>"),
           HTML("<h2 style='color:black; z-index: 9'>User Ranking</h2>"),
           HTML("<h2 style='position:absolute;'>TITLE</h2>"),
           wordcloud2Output("plot1", height = '500px'),
           HTML("</div>")
    )
  )
)

server <- function(input, output, session) {
  output$plot1 <- renderWordcloud2({
    require('wordcloud2')
    data.frame(word = df$key, count = df$value) %>% wordcloud2(., size=.7, color='random-dark')
    
  })
}
shinyApp(ui, server)

推荐阅读