R 闪亮：应用程序发布时看起来不一样
我已经为一个应用程序编写了代码，当我在R中运行该应用程序时，它看起来非常完美。看看输入选项和间距有多清晰： 然而，当我在“闪亮云”上发布应用程序时，它看起来是这样的：注意所有的东西是如何聚集在一起的，底部的文本看起来也很小 你知道为什么会这样吗/ 这是我的密码：R 闪亮：应用程序发布时看起来不一样,r,shiny,shiny-server,shiny-reactivity,R,Shiny,Shiny Server,Shiny Reactivity,我已经为一个应用程序编写了代码，当我在R中运行该应用程序时，它看起来非常完美。看看输入选项和间距有多清晰： 然而，当我在“闪亮云”上发布应用程序时，它看起来是这样的：注意所有的东西是如何聚集在一起的，底部的文本看起来也很小 你知道为什么会这样吗/ 这是我的密码： library(shiny) library(shinyBS) library(shiny) # load the shiny package library(ggplot2) # load the gglpot2 package
library(shiny)
library(shinyBS)
library(shiny) # load the shiny package
library(ggplot2) # load the gglpot2 package if ploting using ggplot
library("shinythemes")
library(magrittr)
library(tidyverse)
library(shinyWidgets)
library(shiny)
library(shinymanager)
library(bsTools)
library(shinyBS)
selectizeTooltip <- function(id, choice, title, placement = "bottom", trigger = "hover", options = NULL){
options = shinyBS:::buildTooltipOrPopoverOptionsList(title, placement, trigger, options)
options = paste0("{'", paste(names(options), options, sep = "': '", collapse = "', '"), "'}")
bsTag <- shiny::tags$script(shiny::HTML(paste0("
$(document).ready(function() {
var opts = $.extend(", options, ", {html: true});
var selectizeParent = document.getElementById('", id, "').parentElement;
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation){
$(mutation.addedNodes).filter('div').filter(function(){return(this.getAttribute('data-value') == '", choice, "');}).each(function() {
$(this).tooltip('destroy');
$(this).tooltip(opts);
});
});
});
observer.observe(selectizeParent, { subtree: true, childList: true });
});
")))
htmltools::attachDependencies(bsTag, shinyBS:::shinyBSDep)
}
ui <- fluidPage(theme = shinytheme("superhero"), # shinythemes::themeSelector(), #
sidebarLayout(
sidebarPanel(
uiOutput("choose_prog"),
uiOutput("choose_name"),
selectizeTooltip(id="choose_name", choice = "group 1", title = "group 1 definition this is a long definition that does not really display well within the narrow text box", placement = "right", trigger = "hover"),
selectizeTooltip(id="choose_name", choice = "group 2", title = "group 2 definition this is another long definition. WHen group 1 and group 3 is is selected, you no longer see this definition", placement = "right", trigger = "hover"),
selectizeTooltip(id="choose_name", choice = "group 3", title = "group 3 definition this does not show if all of the other groups are selected ", placement = "right", trigger = "hover"),
htmlOutput("text"),
),
mainPanel(
plotOutput("plot"),
)
)
)
server <- function(input, output) {
# Drop down selection to chose the program
output$choose_prog <- renderUI({
selectInput("program",
label = HTML('<FONT color="orange"><FONT size="4pt">Select a Program:'),
choices = c("A","B","C"))
})
# Drop down for name
output$choose_name <- renderUI({
# SelectInput works, but this only allows the selection of a SINGLE option
selectInput("names",
label = HTML('<FONT color="orange"><FONT size="4pt">Select user group of interest:'),
choices = c("group 1", "group 2", "group 3"),
multiple = T)
})
output$text <- renderText(paste("<br/>","<h4> STEM Students:</h3>", "This is a definition that I added in the side panel that looks perfect here"))
observeEvent(input$choose_name, {
updateSelectizeInput(session, "choose_name", choices = c("group 1", "group 2", "group 3"))
})
}
shinyApp(ui = ui, server = server)
库（闪亮）
图书馆（shinyBS）
库（闪亮）#加载闪亮的包
库（ggplot2）#如果使用ggplot绘图，则加载GGPOT2包
图书馆（“shinythemes”）
图书馆（magrittr）
图书馆（tidyverse）
图书馆（shinyWidgets）
图书馆（闪亮）
图书馆（shinymanager）
图书馆（b工具）
图书馆（shinyBS）
我不是一个聪明的人。不过，我在HTML或R方面并不差。我并不完全确定这是最好的选择，但它是有效的
这是您的代码和我的更改。我在代码中添加了很多注释，这样您就可以看到我做了什么以及为什么我要这么做。如果你想要更多的解释，让我知道
一些要点：
- 我主要通过两种方式控制工具提示的大小和外观：我添加了一个z索引（将该层放在顶部）和我向文本块添加了一个最小宽度
- 为了消除出现的任意字母和“TRUE”，我将选择框后的自由文本移动到UI代码（从服务器代码）
- 我将字体大小从px或pt改为em。这样，如果屏幕大小改变，文本大小也会改变。如果要使其变大或变小，文本大小有两个主要位置——“ui”调用的顶部（在脚本样式中）、“ui”调用的底部（“STEM students:”下面的文本在此处调整大小），最后，标签大小在“server”调用中调整。我会一起换。如果更改标签-则需要更改脚本标记（或下拉框的文本大小不同）
代码如下：
library(shiny)
library(shinythemes)
# this was set placement to bottom, but selectize calls below were set to right set "right" here and no need to set it below
selectizeTooltip <- function(id, choice, title, placement = "right", trigger = "hover", options = NULL){
options = shinyBS:::buildTooltipOrPopoverOptionsList(title, placement, trigger, options)
options = paste0("{'", paste(names(options), options, sep = "': '", collapse = "', '"), "'}")
bsTag <- shiny::tags$script(shiny::HTML(paste0("
$(document).ready(function() {
var opts = $.extend(", options, ", {html: true});
var selectizeParent = document.getElementById('", id, "').parentElement;
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation){
$(mutation.addedNodes).filter('div').filter(function(){return(this.getAttribute('data-value') == '", choice, "');}).each(function() {
$(this).tooltip('destroy');
$(this).tooltip(opts);
});
});
});
observer.observe(selectizeParent, { subtree: true, childList: true });
});")))
htmltools::attachDependencies(bsTag, shinyBS:::shinyBSDep)
}
ui <- fluidPage(theme = shinytheme("superhero"),
# can't comment within this section like I'd prefer ---
# first - control the tooltip window- I added min-width and max-width
# tool tip to the top by using z-index (I think that's why the tip was hidden)
# -- however, it still wants to show the tip after selecting it and the tip is hidden then...
# then control font-size by the entire form - (labels and input boxes don't inherit the form's styles)
# I tried to set the styles for the labels here, but they wouldn't stick
# I captured the class names by visiting developer tools in my browser after rendering online
# the class labels were not all the same when looking at it locally and after uploading
tags$head(tags$style(HTML('.tooltip .tooltip-inner { min-width: 200px; max-width: 400px;
font-size: 1.5em; text-align:left; padding:10px; z-index: 2 !important;}
.shiny-input-container .control-label {margin-bottom: 1em;}
.selectize-dropdown .option .selectize-input {line-height:1.1em; font-size:2em!important;}
.well {min-height:200px; min-width:200px; font-size:1.5em!important;}'))),
sidebarLayout(
sidebarPanel(
uiOutput("choose_prog"),
uiOutput("choose_name"),
selectizeTooltip(id="choose_name", choice = "group 1",
title = "group 1 definition this is a long definition that does not really display well within the narrow text box",
trigger = "hover"),
selectizeTooltip(id="choose_name", choice = "group 2",
title = "group 2 definition this is another long definition. When group 1 and group 3 is is selected, you no longer see this definition",
trigger = "hover"),
selectizeTooltip(id="choose_name", choice = "group 3",
title = "group 3 definition this does not show if all of the other groups are selected ",
trigger = "hover"),
# this was in the server call, moved to ui
# the styles were moved to style tags and the closing tags added - nolonger h4, because of inconsistent rendering
# this text inherits the font-size from above, to make the text beow "STEM students" smaller I did 75% of the size of the heading
# had to add line-height, because it was overlapping the text here
# moving this to ui got rid of the characters in the top left corner and the "TRUE"s at the bottom
HTML("<div class = 'moreText' style='line-height:1em;'>",
"<br/ >",
"<span>STEM Students:</span>",
"<br />",
"<span style='font-size:.75em!important;'>This is a definition that added in the side panel that looks perfect here</span>"),
htmlOutput("text")
),
mainPanel(
plotOutput("plot"),
)
)
)
server <- function(input, output) {
# Drop down selection to chose the program
output$choose_prog <- renderUI({
selectInput("program",
label = HTML('<font style="color:orange; font-size:2em;">Select a program:</font>'),
choices = c("A","B","C"))
})
# Drop down for name
output$choose_name <- renderUI({
# SelectInput works, but this only allows the selection of a SINGLE option
selectInput("names",
label = HTML('<font style="color:orange; font-size:2em;">Select user group of interest:</font>'),
choices = c("group 1", "group 2", "group 3"),
multiple = T)})
observeEvent(input$choose_name, {
updateSelectizeInput(session, "choose_name", choices = c("group 1", "group 2", "group 3"))
})
}
shinyApp(ui = ui, server = server)
库（闪亮）
图书馆（shinythemes）
#这是设置位置到底部，但下面的selectize调用被设置为right set“right”，无需在下面设置
selectizeTooltip我可能在不久的将来也会遇到这个问题。所以，我将把这个书签。希望你能得到答案。如果你解决了，请回答你自己的问题！你看过这篇文章了吗？不确定这是否对您有帮助。@AOE_玩家谢谢！我查看了日志文件，没有看到任何出错的迹象。我的文件都是小写的。。。我将在问题中发布日志，以防对您有所帮助谢谢，这太棒了！我将再坚持一段时间，看看我是否能得到一个非ccs黑客解决方案，如果不能，我将奖励奖金并回答你我发现很难根据你的代码修改我的实际仪表盘。我可以用你的html代码和标签$head解决字体问题，但它弄乱了我的绘图（绘图现在大部分都在页面外，第二个选项卡上的数据现在在第一个选项卡上）。我添加了一个新问题：
library(shiny)
library(shinythemes)
# this was set placement to bottom, but selectize calls below were set to right set "right" here and no need to set it below
selectizeTooltip <- function(id, choice, title, placement = "right", trigger = "hover", options = NULL){
options = shinyBS:::buildTooltipOrPopoverOptionsList(title, placement, trigger, options)
options = paste0("{'", paste(names(options), options, sep = "': '", collapse = "', '"), "'}")
bsTag <- shiny::tags$script(shiny::HTML(paste0("
$(document).ready(function() {
var opts = $.extend(", options, ", {html: true});
var selectizeParent = document.getElementById('", id, "').parentElement;
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation){
$(mutation.addedNodes).filter('div').filter(function(){return(this.getAttribute('data-value') == '", choice, "');}).each(function() {
$(this).tooltip('destroy');
$(this).tooltip(opts);
});
});
});
observer.observe(selectizeParent, { subtree: true, childList: true });
});")))
htmltools::attachDependencies(bsTag, shinyBS:::shinyBSDep)
}
ui <- fluidPage(theme = shinytheme("superhero"),
# can't comment within this section like I'd prefer ---
# first - control the tooltip window- I added min-width and max-width
# tool tip to the top by using z-index (I think that's why the tip was hidden)
# -- however, it still wants to show the tip after selecting it and the tip is hidden then...
# then control font-size by the entire form - (labels and input boxes don't inherit the form's styles)
# I tried to set the styles for the labels here, but they wouldn't stick
# I captured the class names by visiting developer tools in my browser after rendering online
# the class labels were not all the same when looking at it locally and after uploading
tags$head(tags$style(HTML('.tooltip .tooltip-inner { min-width: 200px; max-width: 400px;
font-size: 1.5em; text-align:left; padding:10px; z-index: 2 !important;}
.shiny-input-container .control-label {margin-bottom: 1em;}
.selectize-dropdown .option .selectize-input {line-height:1.1em; font-size:2em!important;}
.well {min-height:200px; min-width:200px; font-size:1.5em!important;}'))),
sidebarLayout(
sidebarPanel(
uiOutput("choose_prog"),
uiOutput("choose_name"),
selectizeTooltip(id="choose_name", choice = "group 1",
title = "group 1 definition this is a long definition that does not really display well within the narrow text box",
trigger = "hover"),
selectizeTooltip(id="choose_name", choice = "group 2",
title = "group 2 definition this is another long definition. When group 1 and group 3 is is selected, you no longer see this definition",
trigger = "hover"),
selectizeTooltip(id="choose_name", choice = "group 3",
title = "group 3 definition this does not show if all of the other groups are selected ",
trigger = "hover"),
# this was in the server call, moved to ui
# the styles were moved to style tags and the closing tags added - nolonger h4, because of inconsistent rendering
# this text inherits the font-size from above, to make the text beow "STEM students" smaller I did 75% of the size of the heading
# had to add line-height, because it was overlapping the text here
# moving this to ui got rid of the characters in the top left corner and the "TRUE"s at the bottom
HTML("<div class = 'moreText' style='line-height:1em;'>",
"<br/ >",
"<span>STEM Students:</span>",
"<br />",
"<span style='font-size:.75em!important;'>This is a definition that added in the side panel that looks perfect here</span>"),
htmlOutput("text")
),
mainPanel(
plotOutput("plot"),
)
)
)
server <- function(input, output) {
# Drop down selection to chose the program
output$choose_prog <- renderUI({
selectInput("program",
label = HTML('<font style="color:orange; font-size:2em;">Select a program:</font>'),
choices = c("A","B","C"))
})
# Drop down for name
output$choose_name <- renderUI({
# SelectInput works, but this only allows the selection of a SINGLE option
selectInput("names",
label = HTML('<font style="color:orange; font-size:2em;">Select user group of interest:</font>'),
choices = c("group 1", "group 2", "group 3"),
multiple = T)})
observeEvent(input$choose_name, {
updateSelectizeInput(session, "choose_name", choices = c("group 1", "group 2", "group 3"))
})
}
shinyApp(ui = ui, server = server)