bslib在他们的expandable sparklines周围有有用的文档.文档使用javascript修改卡片展开时现有的plotly plot.我试着模仿同样的行为,但要用highcharter情节代替情节.

我希望这是在javascript,而不是使用shiny::getCurrentOutputInfo(),因为它创建了一个lag时,扩大和最小化窗口.

我希望图中的x和y轴都可见,以及图是可导出时展开和隐藏这些元素时最小化.这基本上是我希望看到的使用getCurrentOutputInfo函数的行为(注意延迟和情节的重新渲染).

Example App

library(shiny)
library(bslib)
library(highcharter)

ui <- page_fluid(
    value_box(
      title = "Test",
      value = "Test",
      showcase = highchartOutput("hcp"),
      showcase_layout = showcase_top_right(),
      full_screen = TRUE,
      theme = "success"
  )
)

server <- function(input, output) {
  
  df <- data.frame(dose=c("D0.5", "D1", "D2"),
                   len=c(4.2, 10, 29.5))
  
  output$hcp <- renderHighchart({
    highchart_scatter()
  })
  
  highchart_scatter <- function(x) {
    info <- getCurrentOutputInfo()
    large <- isTRUE(info$height() > 200)
    
    df2 <- df %>% 
      hchart('line', hcaes(x = dose, y = len))
    
    if(large){
      df2 <- df2 %>%
        hc_exporting(enabled = TRUE)
    } else {
      df2 <- df2 %>%
        hc_xAxis(visible = FALSE) %>% 
        hc_yAxis(visible = FALSE)
    }
    return(df2)
  }
}

shinyApp(ui, server)

这是一个js示例代码,用于重构一个plotly图,我基本上想模仿它.

plotly javascript example

  htmlwidgets::onRender(
    "function(el) {
      var ro = new ResizeObserver(function() {
         var visible = el.offsetHeight > 200;
         Plotly.relayout(el, {'xaxis.visible': visible});
      });
      ro.observe(el);
    }"
  )

推荐答案

使用js,你可以这样做:

library(shiny)
library(bslib)
library(highcharter)

ui <- page_fluid(
  value_box(
    title = "Test",
    value = "Test",
    showcase = highchartOutput("hcp"),
    showcase_layout = showcase_top_right(),
    full_screen = TRUE,
    theme = "success"
  )
)

server <- function(input, output) {
  
  df <- data.frame(dose=c("D0.5", "D1", "D2"),
                   len=c(4.2, 10, 29.5))
  
  output$hcp <- renderHighchart({
    highchart_scatter() |> 
      htmlwidgets::onRender("function(el, x) {
                              var ro = new ResizeObserver(function() {
                                var visible = el.offsetHeight > 200;
                                var chart = $('#' + el.id).highcharts()
                              
                                chart.xAxis[0].update({
                                  visible: visible
                                })
                              
                                chart.yAxis[0].update({
                                  visible: visible
                                })

                                chart.exporting.update({
                                  enabled: visible
                                })
                              });
                              ro.observe(el);
                            }")
  })
  
  highchart_scatter <- function(x) {
    
    df2 <- df %>% 
      hchart('line', hcaes(x = dose, y = len))

    return(df2)
  }
}

shinyApp(ui, server)

enter image description here

Javascript相关问答推荐

JavaScript:循环访问不断变化的数组中的元素

使用javascript将Plotly Expandable Sparkline转换为HighCharter Plot在bslib卡中

用JavaScript复制C#CRC 32生成器

WebGL 2.0无符号整数输入变量

阿波罗返回的数据错误,但在网络判断器中是正确的

在执行异步导入之前判断模块是否已导入()

如何强制Sphinx中的自定义js/css文件始终加载更改而不缓存?

在运行时使用Next JS App Router在服务器组件中运行自定义函数

为什么我的getAsFile()方法返回空?

WP Bootstrap NavWaker:下拉菜单一次打开所有下拉菜单

第三方包不需要NODE_MODULES文件夹就可以工作吗?

覆盖加载器页面避免对页面上的元素进行操作

React:防止useContext重新渲染整个应用程序或在组件之间共享数据而不重新渲染所有组件

构建器模式与参数对象输入

Reaction即使在重新呈现后也会在方法内部保留局部值

如果我的列有条件,我如何呈现图标?

是否有静态版本的`instanceof`?

如何调整下拉内容,使其不与其他元素重叠?

需要从对象生成列表

使用jQuery每隔几秒钟突出显示列表中的不同单词