R shinydashboard:将div样式宽度参数指定为百分比以适合可调整大小的JS图

Question

任务:使用R和shinydashboard在仪表板主体中嵌入自定义Javascript生成的绘图.指定绘图的宽度为百分比,以便绘图占据其列(或框),无论查看者的屏幕设置如何.

设置:R(3.5.2),shiny(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将放置在www相对于app文件本身的子文件夹中,如下所示:

// 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如何工作,因为它们构成了整个应用程序.有没有可以想到的解决方法？谢谢.

Answer 1

非常有趣，但是是的，它似乎是tabItems.

通过 css 设置宽度，它只是拉伸了情节，所以这并没有真正起作用。我找到了那些小的变通方法，可以在调整窗口大小时调整绘图大小。

选项 1：
首先调整我用来shinyjs在启动时折叠侧边栏的窗口的大小，这样绘图也会调整大小。这将启动带有折叠侧边栏的应用程序。

如果你想在启动时不被折叠的边栏，你就必须添加collapsed = TRUE到dashboardSidebar与变化addClass中的服务器removeClass。

选项 2：
如果您不想使用shinyjs，可以添加一些 JS 代码片段，例如：

jss <- HTML("
$(document).on('shiny:connected', function() {
  $('.sidebar-toggle').click();
});
")

和

tags$head(tags$script(jss))

在dashboardBody和collapsed = TRUE中dashboardSidebar。

应用程序

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)

我的脚本.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();
    }
});