使用highcharter导出菜单删除所有数据表

scyqe7ek 于 2022-12-06 发布在其他

关注(0)|答案(1)|浏览(105)

我不确定这是一个bug还是highcharter的一个特性。我有一个简单的应用程序，它可以让用户快速查看用于绘制图表的数据。假设用户从右侧菜单中选择“查看数据表”选项。一旦数据表出现，他们就可以更改下拉输入之一。一组新的数据被绘制出来。用户然后再次选择“查看数据表”。并出现另一组数据表。
现在，如果用户选择“隐藏数据表”，只有一个表被删除。我想知道是否有办法将它们全部删除？

library(highcharter)
library(tidyverse)
library(shiny)

ui <- fluidPage(
  
  selectInput("First", label = "First Variable", width = "100%",
              choices = colnames(iris)), 
  selectInput("Second", label = "Second", width = "100%",
              choices = colnames(iris)),
  highchartOutput("hchartcont")
  
)

server = function(input, output) {
  
  output$hchartcont <- renderHighchart({
    df <- iris %>% select(x = input$First, y = input$Second)
    hchart(df, "line", hcaes(x, y)) %>% 
    hc_exporting(enabled = TRUE)
  })
  
}

shinyApp(ui = ui, server = server)

r

来源：https://stackoverflow.com/questions/74542502/remove-all-data-tables-using-from-highcharter-export-menu

1条答案

按热度按时间

juzqafwq1#

这是一种解决方法。当您更新图表时，将使用htmlwidgetsonRender()删除表。
不幸的是，如果页面的大小调整到足以触发重新呈现，则该表将被删除。
这是从您的server更新的output$highchartcont。

output$hchartcont <- renderHighchart({
  df <- iris %>% select(x = input$First, y = input$Second)
  hchart(df, "line", hcaes(x, y)) %>%
    hc_exporting(enabled = TRUE) %>% 
    htmlwidgets::onRender(
      "function(el, x) {
        Highcharts.addEvent(Highcharts.Chart, 'render', function() {
          if($('div.highcharts-data-table').length) { /* does it exist? */
            $('div.highcharts-data-table').remove();  /* then remove it */
          }
      });
      }")})

如果您不知道，可以设置此表的样式，使其更美观。例如...

ui <- fluidPage(
  tagList(
    tags$style(HTML(
    ".highcharts-data-table tr:nth-child(even),
      .highcharts-data-table thead tr {
      background: #f8f8f8;
    }
    .highcharts-data-table td,
      .highcharts-data-table th,
      .highcharts-data-table caption {
      border: 1px solid silver;
      padding: 0.5em;
    }
    .highcharts-data-table tr {
      cursor: pointer;
    }
    .highcharts-data-table tr:hover {
      background: #eff;
    }
    .highcharts-data-table table {
      border-collapse: collapse;
      border-spacing: 0;
      min-width: 200px;
      max-width: 100%;
      margin-top: 10px;
    }")),
    selectInput("First", label = "First Variable", width = "100%",
                choices = colnames(iris)), 
    selectInput("Second", label = "Second", width = "100%",
                choices = colnames(iris)),
    highchartOutput("hchartcont")
  ))

赞(0）回复(0）举报 2022-12-06

我来回答

使用highcharter导出菜单删除所有数据表

1条答案

相关问题

热门标签

最新问答