shinyApps.io 上部署的仪表板显示奇怪的符号
Dashboard deployed on shinyApps.io shows weird symbols
仪表板的本地版本看起来与部署在免费 Shiny 服务器上的版本不同。为了纠正这个问题，我添加了一些 ccs 和 html 来暴力破解外观。但是，我仍然 运行 遇到一些问题。
这是它在当地的样子：
这是部署在闪亮服务器上的样子：
注意左上角的奇怪符号：(]*)?>)\1,
左下角的符号：'TRUE TRUE TRUE'。
我不知道是什么导致了这种情况发生。我花了很多时间调整代码，但没有任何结果。
非常感谢您提供一些见解！只有在服务器上部署时才会出现此问题，并显示在仪表板的两个选项卡上。 :(
这是我的代码：
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)
# 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(navbarPage(
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;}'))),
tabPanel(
title = "Program Participation",
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"),
),
mainPanel(
plotOutput("plot")
# br(),
)
)),
# SECOND TAB
tabPanel(title = "Additional Information/ Documentation",
pageWithSidebar(
headerPanel("Data sources and other information"),
sidebarPanel(
),
mainPanel("Place holder for information about data"
)
)
)
))
server <- function(input, output) {
# result_auth <- secure_server(check_credentials = check_credentials(credentials))
output$plot <- renderPlot({
plot(mtcars$wt, mtcars$mpg)
}, height = 800, width = 'auto')
# 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)
通过将库更新为您实际使用的内容，可以消除您的渲染 true true true（以及其他出现的随机性）。
对于所有这些编程，您只需要调用：
library(shiny)
library(shinythemes)
library(tidyverse)
您在第二个 tabPanel 中使用了 pageWithSidebar()。该功能已弃用。如果您打算使用此应用一段时间，请将其更改为 fluidPage() 或 fluidRow()。
当我渲染这个时，它一直想把情节放在侧边栏下面。您应该在第一个 tabPanel() 中添加 fluidRow()。这样它将尝试将它们渲染成彼此相邻，除非适合是一个问题。
您的绘图具有设定的高度和自动宽度。我不确定 shiny 究竟是如何读取和呈现它的。锁定纵横比可能有用。
在 tags$head... 调用中，我添加了 .column-sm-8 {min-width:400px;} 以使第一个 tabPanel 的主面板具有最小宽度。看起来这个 class（所以这个最小宽度）将适用于您使用的任何 mainPanel。
最后，在服务器功能中，你有情节比输入形式。因为它看起来像你在构建复杂性，所以最好在此处订购内容，当它变得非常复杂时，它会让你的工作更容易。不过，R 不关心你把它放在什么顺序。
仪表板的本地版本看起来与部署在免费 Shiny 服务器上的版本不同。为了纠正这个问题，我添加了一些 ccs 和 html 来暴力破解外观。但是，我仍然 运行 遇到一些问题。
这是它在当地的样子：
这是部署在闪亮服务器上的样子：
注意左上角的奇怪符号：(]*)?>)\1,
左下角的符号：'TRUE TRUE TRUE'。
我不知道是什么导致了这种情况发生。我花了很多时间调整代码，但没有任何结果。
非常感谢您提供一些见解！只有在服务器上部署时才会出现此问题，并显示在仪表板的两个选项卡上。 :(
这是我的代码：
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)
# 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(navbarPage(
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;}'))),
tabPanel(
title = "Program Participation",
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"),
),
mainPanel(
plotOutput("plot")
# br(),
)
)),
# SECOND TAB
tabPanel(title = "Additional Information/ Documentation",
pageWithSidebar(
headerPanel("Data sources and other information"),
sidebarPanel(
),
mainPanel("Place holder for information about data"
)
)
)
))
server <- function(input, output) {
# result_auth <- secure_server(check_credentials = check_credentials(credentials))
output$plot <- renderPlot({
plot(mtcars$wt, mtcars$mpg)
}, height = 800, width = 'auto')
# 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)
通过将库更新为您实际使用的内容，可以消除您的渲染 true true true（以及其他出现的随机性）。 对于所有这些编程，您只需要调用：
library(shiny)
library(shinythemes)
library(tidyverse)
您在第二个 tabPanel 中使用了 pageWithSidebar()。该功能已弃用。如果您打算使用此应用一段时间，请将其更改为 fluidPage() 或 fluidRow()。
当我渲染这个时，它一直想把情节放在侧边栏下面。您应该在第一个 tabPanel() 中添加 fluidRow()。这样它将尝试将它们渲染成彼此相邻，除非适合是一个问题。
您的绘图具有设定的高度和自动宽度。我不确定 shiny 究竟是如何读取和呈现它的。锁定纵横比可能有用。
在 tags$head... 调用中，我添加了 .column-sm-8 {min-width:400px;} 以使第一个 tabPanel 的主面板具有最小宽度。看起来这个 class（所以这个最小宽度）将适用于您使用的任何 mainPanel。
最后，在服务器功能中，你有情节比输入形式。因为它看起来像你在构建复杂性，所以最好在此处订购内容，当它变得非常复杂时，它会让你的工作更容易。不过，R 不关心你把它放在什么顺序。