标签：javascript r shiny html shinydashboard
任务：使用R和shinydashboard,在仪表板主体中嵌入自定义Javascript生成的绘图.指定绘图的宽度为百分比,以便绘图占据其列(或框),无论查看者的屏幕设置如何.
设置：R(3.5.2),有光泽(1.2.0)和shinydashboard(0.7.1).仪表板代码(简化的可重现示例)如下：
library(shiny)
library(shinydashboard)
ui <- fluidPage(
dashboardPage(
dashboardHeader(),
dashboardSidebar(
sidebarMenu(
menuItem("Main", tabName = "tab1", icon = icon("dashboard")
)
)
),
dashboardBody(
tabItems(
tabItem("tab1",
column(width = 12,
tags$div(id = "main", style = "width: 100%; height: 400px"),
tags$script(src = "http://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"),
tags$script(src = "myscript.js")
)
)
)
)
)
)
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
相应的Javascript文件myscript.js,相对于app文件本身放在www子文件夹中,如下所示：
// JS Plot with Echarts 4
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
问题：出于某种原因,100％规范在最终结果中转换为100px,产生此输出：
检查图我看到div#main的宽度确实是100％,但它包含另一个较小的div,它已经是100px宽：
对我来说,似乎tabItem或tabItems都有错,因为没有使用它们,结果是正确的,并且较小的中间div正确地从其父节点获取其宽度：
为完整起见,工作版本的代码(没有tabItem(s))是这样的：
library(shiny)
library(shinydashboard)
ui <- fluidPage(
dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
column(width = 12,
tags$div(id = "main", style = "width: 100%; height: 400px"),
tags$script(src = "http://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"),
tags$script(src = "myscript.js")
)
)
)
)
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
如您所见,代码几乎完全相同,除了有问题的功能.然而,我没有看到没有这些功能的shinydashboard如何工作,因为它们构成了整个应用程序.有没有可以想到的解决方法？谢谢.
解决方法:
非常有趣,但是它似乎是tabItems中的错误/功能.
通过css设置宽度,它只是拉伸图,所以这不起作用.
我找到了那些小的解决方法,在窗口调整大小时调整绘图的大小.
选项1：
要最初调整窗口大小,我使用shinyjs在启动时折叠侧边栏,因此图表也会调整大小.这将使用折叠的侧边栏启动应用程序.
如果您希望在启动时不折叠侧边栏,则必须将collapsed = TRUE添加到dashboardSidebar并将服务器中的addClass更改为removeClass.
选项2：
如果您不想使用shinyjs,可以添加一些JS-snippet,如：
jss <- HTML("
$(document).on('shiny:connected', function() {
$('.sidebar-toggle').click();
});
")
同
tags$head(tags$script(jss))
在dashboardBody中的dashboardBody和collapsed = TRUE中.
app.R
ui <- fluidPage(
dashboardPage(
dashboardHeader(),
dashboardSidebar(
sidebarMenu(
menuItem("Main", tabName = "tab1", icon = icon("dashboard")
)
)
),
dashboardBody(
useShinyjs(),
tabItems(
tabItem("tab1",
column(width = 12,
tags$div(id = "main", style = "width: 100%; height: 400px"),
tags$script(src = "http://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"),
tags$script(src = "myscript.js")
)
)
)
)
)
)
server <- function(input, output) {
addClass(selector = "body", class = "sidebar-collapse")
}
# Run the application
shinyApp(ui = ui, server = server)
myscript.js
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
var myChart = echarts.init(document.getElementById('main'), width='100%');
myChart.setOption(option);
$(window).on('resize', function(){
if(myChart != null && myChart != undefined){
myChart.resize();
}
});
标签：javascript,r,shiny,html,shinydashboard 来源： https://codeday.me/bug/20190522/1152467.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。