javascript - 使用操作按钮在高图表/闪亮中显示/隐藏系列

Question

我在这里找到了一个例子，它与我想要做的完全匹配。

唯一的问题是它不是自动化的：我需要一个操作按钮来隐藏图表上的所有系列，即使添加了一些。

我尝试使用 for 循环，但没有成功。

这是我尝试过的代码：（对于原始代码，它在链接中）

library('shiny')
library('shinydashboard')
library('highcharter')
library('evaluate')
library('V8')
library("shinyWidgets")
library('devtools')
library('shinyjs')
#install.packages("devtools")

data_plot <- data.frame(categories = c("A", "B", "C", "D"),
                    serie1 = c(1563, 1458, 205, 695),
                    serie2 = c(562, 258, 17, 115))

name <- list("serie1", "serie2")
str(name)

jsCode <- "
shinyjs.toggleSerie = function(params) {

for(int i = 1; i < name.length; i++)
{
string serieToToggle = $('#plot').highcharts().get(name[i]);

if(serieToToggle.visible){
serieToToggle.setVisible(false);
} 
else {
serieToToggle.setVisible(true);
} 
}
}
"

ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
  useShinyjs(),
  extendShinyjs(text = jsCode),
  shinyWidgets::materialSwitch(
  inputId = "button",
  label = "Button",
  value = FALSE
  ),
  highchartOutput(outputId = "plot"),
 highchartOutput(outputId = "plot2")
 )
 )

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

 output$plot <- renderHighchart({
  data_plot <- data.frame(categories = c("A", "B", "C", "D"),
                        serie1 = c(1563, 1458, 205, 695),
                        serie2 = c(562, 258, 17, 115))
 highchart() %>%
  hc_chart(
    type = 'bar'
  ) %>%
  hc_add_series(
    data = data_plot$serie1,
    name = 'Serie to hide/show',
    id = name[0]
  ) %>%
  hc_add_series(
    data = data_plot$serie2,
    name = 'Serie 2',
    id = name[1]
  ) %>%
  hc_xAxis(
    categories = data_plot$categories,
    title = list(text = 'Categories')
  ) %>%
  hc_plotOptions(bar = list(stacking = 'normal'))
 })

output$plot2 <- renderHighchart({
data_plot <- data.frame(categories = c("A", "B", "C", "D"),
                        serie1 = c(1563, 1458, 205, 695),
                        serie2 = c(562, 258, 17, 115))
highchart() %>%
hc_chart(
type = 'bar'
) %>%
hc_add_series(
data = data_plot$serie1,
name = 'Serie to hide/show',
id = 'efwg'
) %>%
hc_add_series(
data = data_plot$serie2,
name = 'Serie 2',
id = 'rioij'
) %>%
hc_xAxis(
categories = data_plot$categories,
title = list(text = 'Categories')
) %>%
hc_plotOptions(bar = list(stacking = 'normal'))
})

onclick(id = "button", expr = {
js$toggleSerie()
})

session$onSessionEnded(stopApp)
}

shinyApp(ui = ui, server = server)

标签： javascriptrshinyr-highcharter

Answer 1

您必须通过参数将系列名称传递给toggleSerie函数params。而且您的代码中有一些小错误。JavaScript 中数组的第一个索引是 0，而不是 1，而在 R 中，向量的第一个索引是 1，而不是 0。

library('shiny')
library('shinydashboard')
library('highcharter')
library("shinyWidgets")
library('shinyjs')

data_plot <- data.frame(categories = c("A", "B", "C", "D"),
                        serie1 = c(1563, 1458, 205, 695),
                        serie2 = c(562, 258, 17, 115))

series <- c("serie1", "serie2")

jsCode <- "
shinyjs.toggleSerie = function(params) {

for(var i = 0; i < params.names.length; i++)
{
  var serieToToggle = $('#plot').highcharts().get(params.names[i]);
  if(serieToToggle.visible){
    serieToToggle.setVisible(false);
  } 
  else {
    serieToToggle.setVisible(true);
  } 
}
}
"

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    useShinyjs(),
    extendShinyjs(text = jsCode),
    materialSwitch(
      inputId = "button",
      label = "Button",
      value = FALSE
    ),
    highchartOutput(outputId = "plot")
  )
)

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

  output$plot <- renderHighchart({
    data_plot <- data.frame(categories = c("A", "B", "C", "D"),
                            serie1 = c(1563, 1458, 205, 695),
                            serie2 = c(562, 258, 17, 115))
    highchart() %>%
      hc_chart(
        type = 'bar'
      ) %>%
      hc_add_series(
        data = data_plot$serie1,
        name = 'Serie to hide/show',
        id = series[1]
      ) %>%
      hc_add_series(
        data = data_plot$serie2,
        name = 'Serie 2',
        id = series[2]
      ) %>%
      hc_xAxis(
        categories = data_plot$categories,
        title = list(text = 'Categories')
      ) %>%
      hc_plotOptions(bar = list(stacking = 'normal'))
  })

  onclick(id = "button", js$toggleSerie(names = series))

}

shinyApp(ui = ui, server = server)