javascript - 在 Shiny 中同步两个 Highcharts - 输入更改时不调用 JS

Question

与 previous post 有关我做了，我想更新一个 Highcharter 图中的点，以在双向调用 R Shiny 中单独但同步的 Highcharter 图中的点击事件时更改颜色。我能够在 R Shiny 中同步两个 Highcharter 图，但是当用户在 UI 中切换输入时，点击事件的 JavaScript 不再有效(在实际点击事件中同步和任一图表)。请参阅此可重现的示例:

##PACKAGES
library(shiny)
library(shinyWidgets)
library(shinyjs)
library(dplyr)
library(tidyverse)
library(albersusa) ## remotes::install_github("hrbrmstr/albersusa")
library(highcharter)
library(usdata)
library(data.table)

states <- data.frame(
  name  = rep(state.abb,4),
  state = rep(state.name,4),
  metric = c(rep("YES",100),rep("NO",100)),
  value  = sample(100:5000,200)
)

#for synchronizing Highcharts 1 and 2
testJS <- JS("function() {
                       let currentY = this.name
                       charts = Highcharts.charts;
                       charts.forEach(function(chart, index) {
                       chart.series.forEach(function(series, seriesIndex) {
                       series.points.forEach(function(point, pointsIndex) {
                       if (point.name == currentY) {
                               point.setState('hover');
                               point.update({color:'red'})
                       }
                       })
                       });
                       });
        }")

ui <- fluidPage(
  
  tags$script(src = "https://code.highcharts.com/mapdata/countries/us/us-all.js"),
  
  fluidRow(
    radioButtons(inputId = "toggle",label="toggle it", 
                 choices = c("YES","NO")),
    column(width=5,highchartOutput("map1")),
    column(width=5,highchartOutput("bar1"))
    )
  )

server <- function(input, output, session) {
  
  #create rate change
  df1_num<- reactive({
    states %>%
    filter(metric == input$toggle) %>%
    group_by(name) %>%
    mutate(
      first = dplyr::first(value),
      last = dplyr::last(value)
    ) %>%
    distinct(metric,state,first,last) %>%
    mutate(
      #increase/decrease rate change
      rate  = round(((last-first)/first)*100,1),
    )
  })
  
  #HIGHCHART 1 (map)
  output$map1 <- renderHighchart({
    #US map of percent change in population trends
    hcmap("countries/us/us-all",
          data   = df1_num(),
          joinBy = c("hc-a2","name"),
          value  = "rate",
          borderColor = "#8d8d8d",
          nullColor = "#D3D3D3",
          download_map_data = FALSE
    ) %>%
      hc_plotOptions(series = list(
        point = list(
          events = list(
            click = testJS
          )
        )
      )
      )
  })
  
  #HIGHCHART 2 (barchart)
  output$bar1 <- renderHighchart({
    
    test <- df1_num() %>%
      arrange(rate) %>%
      rowid_to_column("orderrate")
    setDT(test)[,testit:=.GRP,by=orderrate]
    
    highchart() %>%
      hc_add_series(
        data = test,
        hcaes(
          x     = state,
          y     = rate,
          group = orderrate),
        showInLegend = FALSE,
        type = "bar",
        color = "blue",
        polar = FALSE
      ) %>%
      hc_plotOptions(series = list(
        point = list(
          events = list(
            click = testJS
          )
        )
      )
      )
  })

}

shinyApp(ui = ui, server = server)

在我的previous post ，我收到了一个很好的答案，它通过保留点击事件功能修复了 R Shiny 用户输入更改，但是这个解决方案不同步图表(将值 testJS 替换为):

JS("function(){
       this.update({color:'red'})
    }")

我意识到我在这里的主要斗争是在令人惊叹的 Highcharter 包装器和原始 Highcharts JS 之间创造和谐，所以任何想法(或我根本不知道的明确方向)都会非常有帮助!

谢谢!

Answer 1

问题

问题是，显然，每当您更改 shiny 输入时，new highcharter 对象都会添加到 Highcharts.charts 和之前的对象中未删除但设置为 undefined。因此，在您的第一个 forEach 循环中，您遍历 undefined 数组项，这些项没有(出于显而易见的原因)series 槽。

解决方案

因此，您必须确保 chart 为真，只有当它确实是图表时才执行内部循环。一个简单的 if 子句就可以解决这个问题:

testJS <- JS("
function() {
    let currentY = this.name;
    let charts = Highcharts.charts;
    charts.forEach(function(chart, index) {
        if (chart) { // add this
            chart.series.forEach(function(series, seriesIndex) {
                series.points.forEach(function(point, pointsIndex) {
                    if (point.name == currentY) {
                        point.setState('hover');
                        point.update({
                            color: 'red'
                        })
                    }
                })
            });
        }
    });
}")

我是怎么知道的？

无论何时处理 JavaScript，开发人员控制台都是您的 friend ，请按 Ctrl-Shift-J 将其调出。在您的原始代码中，您会看到一条错误消息:

VM58:6 Uncaught TypeError: Cannot read properties of undefined (reading 'series')
   at eval (eval at tryEval (htmlwidgets.js:252), <anonymous>:6:22)
   at Array.forEach (<anonymous>)
   at h.eval (eval at tryEval (htmlwidgets.js:252), <anonymous>:4:15)
   at highcharts.js:18
   at Array.forEach (<anonymous>)
   at B (highcharts.js:18)
   at h.g.firePointEvent (highcharts.js:280)
   at a.onContainerClick (highcharts.js:308)

这会提示您正在尝试读取 undefined 的 series 属性。将 console.log(charts) 添加到您的代码并重新执行表明

(2) [a, a] // before input change
(4) [undefined, undefined, a, a] // after input change

表明一旦你按下一个shiny控件(并重新渲染highchart)一个新的对象被添加到charts但是旧的没有被删除，而是设置到 undefined 导致提出的解决方案。