echarts4r 标记线与代理图表答案

【问题标题】：echarts4r mark line with proxy chartecharts4r 标记线与代理图表
【发布时间】：2022-12-17 11:01:34
【问题描述】：

是否可以使用代理添加和删除标记线，以便图表不会完全重绘？

为了说明它的样子：

library(shiny)
library(echarts4r)

df <- data.frame(
  x = 1:100,
  y = runif(100)
)

ui <- fluidPage(
  actionButton("add", "Add series"), 
  actionButton("rm", "Remove series"), 
  echarts4rOutput("chart")
)

server <- function(input, output){
  
  output$chart <- renderEcharts4r({
    e_charts(df, x) %>% 
      e_scatter(y, z)
  })
  
  # e_mark_line() - has id added for this example
  observeEvent(input$add, {
    echarts4rProxy("chart", data = df, x = x) %>%  
      e_mark_line(
        id = "my_line"
        , data = list(xAxis = 50)
        , title = "Line at 50") %>%
      e_execute()
  })
  
  # e_remove_mark_line() - is made up for this example
  observeEvent(input$rm, {
    echarts4rProxy("chart") %>%
      e_remove_mark_line("my_line")
  })
  
}
shinyApp(ui, server)

【问题讨论】：

标签： shiny echarts4r

【解决方案1】：

这有点奇怪。显然，“标记线”附加到特定系列。我没有为 id 字段添加处理程序，但可以这样做。但是，您还必须指定它附加到的跟踪。

顺便说一句：在你的代码中，你写了e_scatter(y, z)，但没有z。

最简单的方法是创建一个类似于您在代码中避开的函数。

有两个自定义函数。一个用于 R 代码中的 Shiny。一个用于 Javascript 中的浏览器。结合起来，这些创建函数e_remove_markLine_p。

R 函数（专门用于 Shiny 应用程序）

e_remove_markLine_p <- function (proxy) 
{
  opts <- list(id = proxy$id)
  proxy$session$sendCustomMessage("e_remove_markLine_p", opts)
  return(proxy)
}

JS函数

Shiny.addCustomMessageHandler('e_remove_markLine_p',
      function(data) {
        var chart = get_e_charts(data.id);
        let opts = chart.getOption();
        if(opts.markLine.length > 0) {
          opts.markLine.length = 0;     /* remove data */
        }
        chart.setOption(opts, true);
      })

利用 Shiny 的强大功能，这两个函数将浏览器的请求承载到 R& 返回到浏览器。

在代码中，我更改了其他一些内容。我没有使用 e_mark_line，而是使用了 e_mark_p。我不确定它是否重要，但根据文档，这是适当的功能。

这是整个应用程序。

library(tidyverse)
library(echarts4r)
library(shiny)

set.seed(315)
df <- data.frame(x = 1:100, y = runif(100))

# custom function for 'e_remove_markLine_p',
e_remove_markLine_p <- function (proxy) 
{
  opts <- list(id = proxy$id)
  proxy$session$sendCustomMessage("e_remove_markLine_p", opts)
  return(proxy)
}

ui <- fluidPage( 
  # adds the same call to both add and remove buttons
  tags$head(
  tags$script(HTML("
  Shiny.addCustomMessageHandler('e_remove_markLine_p',
      function(data) {
        var chart = get_e_charts(data.id);
        let opts = chart.getOption();
        if(opts.markLine.length > 0) {
          opts.markLine.length = 0;     /* remove data */
        }
        chart.setOption(opts, true);
      })
  "))),
  actionButton("add", "Add series"), 
  actionButton("rm", "Remove series"), 
  echarts4rOutput("chart")
)

server <- function(input, output){
  
  output$chart <- renderEcharts4r({
    e_charts(df, x) %>% 
      e_scatter(y)         # <--- I removed z, since it doesn't exist...
  })
  
  observeEvent(input$add, {  
    echarts4rProxy("chart", data = df, x = x) %>%  
      e_mark_p(type = "line",
               data = list(xAxis = 50), 
               title = "Line at 50") %>%
      e_merge() %>% e_execute() # merge when adding to the plot
  })
  
  observeEvent(input$rm, {
    echarts4rProxy("chart") %>% 
      e_remove_markLine_p()   # remove all "mark" lines
  })
  
}

shinyApp(ui, server) # show me what you got

【讨论】：