echarts4r中基于datazoom的渲染表格

Question

我在

shiny

应用程序中有一个表格，根据 ggplot 中制作的图表上的

input$brush

进行过滤。因此，用户浏览图表中的某些点并得到下面相应的表格。所有这一切都有效：

  output$plot_brushed_points <- render_gt({
    dat<-dft()%>%
      select(c(4,8:16,18:19,21:38))
    dat<-dat %>% 
      mutate(across(where(is.numeric) & !(c("ODDS1","ODDS2","ODDS3")), ~ round(.x, 3)))
    res<- brushedPoints(dat,input$brush)
    gt(res) %>% 
      opt_interactive() %>% 
      tab_header(md("**In-depth parameter details**")) %>% 
          tab_options(table.width = pct(100),
                      container.width = pct(150))
  })

我正在将所有图表切换到 echarts，因此我需要保留相同的功能。我想从图表上过滤的点中获取一个表格。我假设我需要从

e_datazoom()

获取一些坐标，但不知道如何使其工作。 这是我的图表的代码：

output$plotui1<- renderEcharts4r({
  g1<- dft() %>%
    select(x=xvar(),y=yvar(),sz=sz(),FSCORE, HOME,AWAY) %>%
    group_by(FSCORE) %>%
    mutate(game=paste(HOME,AWAY,sep="-")) %>% 
    e_charts(x) %>%
    e_scatter(y,sz,bind = game,symbol_size = 2) %>%
    e_tooltip(formatter=htmlwidgets::JS("
           function(params){
           var vals = params.name.split('-')
          return('<strong>' + vals[0] + '-'+ vals[1] +
         '</strong><br />xvar(): ' + params.value[0] + '<br />yvar(): ' + params.value[1] +
         '<br />sz():' +params.value[2]) 
      }")) %>% 
    e_datazoom()  %>% 
    e_zoom(
      dataZoomIndex = 1
    ) %>% 
    e_legend(bottom = 0)
    g1
})

Answer 1

这里有一个方法。

可以使用JavaScript获取缩放开始位置的百分比和缩放结束位置的百分比。它们是由

datazoom

事件给出的。还可以获得x轴的范围。这样就可以得到缩放区域的最小 x 值和最大 x 值。并用

Shiny.setInputValue

将它们发送到 Shiny。

但是当您拖动缩放手柄时，会连续触发

datazoom

事件。这非常快，所以我在 Shiny 应用程序中使用

debounce

来减慢最小值和最大值的接收速度。

library(shiny)
library(echarts4r)
library(htmlwidgets) # to use onRender()

myChart <- USArrests |>
  e_charts(UrbanPop) |>
  e_line(Assault) |>
  e_grid() |>
  e_datazoom() |>
  onRender(
    "function(el, x) {
       var chart = this.getChart();
       chart.on('datazoom', function(e) {
         var xbounds = chart.getModel().getComponent('xAxis', 0).axis.scale.getExtent();
         var xmin = xbounds[0];
         var xmax = xbounds[1];
         var xrange = xmax - xmin;
         var min = xmin + xrange * e.start/100;
         var max = xmax - xrange * (100 - e.end)/100;
         Shiny.setInputValue('zoomBounds', [min, max]);
       });
    }")

ui <- fluidPage(
  br(),
  fluidRow(
    column(
      7,
      echarts4rOutput("echart")
    ),
    column(
      5,
      tableOutput("table")
    )
  )
)

server <- function(input, output, session) {

  output$echart <- renderEcharts4r({
    myChart
  })

  zoomBounds <- reactive({
    input$zoomBounds
  }) |> debounce(1000) # use debounce to slow down

  zoomedData <- reactive({
    bounds <- zoomBounds()
    if(is.null(bounds)) { # initial state
      return(USArrests)
    }
    xmin <- bounds[1]
    xmax <- bounds[2]
    subset(USArrests, UrbanPop >= xmin & UrbanPop <= xmax)
  })

  output$table <- renderTable({
    zoomedData()
  })

}


shinyApp(ui, server)