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

2023-12-02

相关于上一篇文章我提出,我想在 R Shiny 中的一个单独但同步的 Highcharter 图中调用单击事件时,在两个方向上更新一个 Highcharter 图中的点以更改颜色。我能够在 R Shiny 中同步两个 Highcharter 绘图,但是当用户在 UI 中切换输入时,单击事件的 JavaScript 不再起作用(两者都同步)and在任一图表的实际点击事件中)。请参阅这个可重现的示例:

##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)

In my 上一篇文章,我收到了一个很好的答案,它通过保留单击事件功能来修复 R Shiny 用户输入更改,但是此解决方案不会同步图表(替换值testJS with):

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

我意识到我在这里的主要困难是在令人惊叹的 Highcharter 包装器和原始 Highcharts JS 之间建立和谐,因此任何想法(或我根本不知道的明确方向)都会非常有帮助!

Thanks!


Problem

问题是,显然,每当你改变shiny输入一个newhighcharter 对象被添加到Highchart.charts并且之前的没有被删除而是设置为undefined。因此,在你的第一个forEach循环你循环undefined没有(出于明显原因)a的数组项series slot.

Solution

因此,您必须确保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开发者控制台是你的朋友,请按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)

这暗示您正在尝试阅读series的财产undefined。添加console.log(charts)到你的代码并重新执行表明

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

表示一旦您按 ashiny控制(并重新渲染高图)添加新对象charts但旧的并没有被删除,而是设置为undefined这导致了所提出的解决方案。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 Shiny 中同步两个 Highchart - 输入更改时不调用 JS 的相关文章

  • Purrr::map_df() 删除 NULL 行

    使用时purrr map df 我偶尔会传递一个数据框列表 其中一些项目是NULL 当我做 map df 返回行数少于原始列表的数据框 我想发生的事情是这样的map df calls dplyr bind rows 它忽略了NULL价值观
  • Number.IsNaN() 比 isNaN() 更糟糕吗

    Soooooo isNaNJavaScript 显然被破坏了 比如 isNaN isNaN isNaN true isNaN false isNaN 0 返回 false 当它们看起来都是 不是数字 在 ECMAScript 6 中 草案包
  • 想要动态处理与分页相关的页码显示:ReactJS

    我有一些分页逻辑工作得很好 唯一的问题是我只能让它显示并固定数量的页面可供选择 现在我已经把它放到了 5 页 但我希望它能够根据总记录动态更改 假设我有 100 条记录 每页限制为 10 条 将有 10 页 现在我只能让它以这种方式显示 第
  • 本地推送通知到在应用程序内运行 JS 代码的 Win8 Live Tile

    我正在尝试将更新发送到我的应用程序的磁贴 当应用程序运行时 这可以正常工作 例如 当用户单击按钮时 我可以轻松地将磁贴更新通知发送到磁贴 我无法解决的是当应用程序无法运行时如何更新磁贴 我找到的唯一选择是使用以下命令从远程 Web 服务器拉
  • ReactTransitionGroup 不适用于 React-redux 连接组件

    我正在开发一个更大的项目 但我创建了这个简短的示例来说明问题 如果我使用Box组件 它的工作原理 它在控制台中输出componentWillEnter and componentWillLeave当我们点击按钮时 如果我使用BoxConta
  • React autoFocus 将光标设置为输入值的开头

    我有一个受控输入 最初显示一个值 我已将该输入设置为自动聚焦 但当我希望它出现在末尾时 光标出现在输入的开头 我知道这可能是因为自动对焦是在值之前添加的 但我不能 100 确定 在输入字段末尾完成光标初始化的最佳方法是什么 var Test
  • JavaScript 继承;调用和原型

    要在Javascript中实现继承 通常需要执行以下两个步骤 假设我有一个基类 Animal var Animal function name this name name 我现在想从中派生一个子类 Dog 所以我想说 var Dog fu
  • 只读取选定的列

    谁能告诉我如何仅读取下面每年数据的前 6 个月 7 列 例如使用read table Year Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec 2009 41 27 25 31 31 39 2
  • 将 Firebase 云消息传递与 Windows 应用程序结合使用

    我在 Android 和 iOS 应用程序中使用 Firebase Cloud Messaging 但是我还有此应用程序的 Windows Mac OS 版本 我想保留相同的逻辑 我知道 Firebase Cloud Messaging 可
  • 如何在另一个自定义 Hook 中使用返回值的自定义 Hook?

    我正在使用 React native 其中有一个名为的自定义 HookuseUser使用以下方法从 AWS Amplify 获取用户信息Auth getUserInfro方法 然后获取返回对象的一部分并用它设置一个状态变量 我还有另一个名为
  • 使用 JavaScript 移动页面上的按钮

    我的按钮可以移动 但奇怪的是 我无法弄清楚偏移是否有问题 我希望我的按钮随着鼠标光标移动 但现在它的移动方式不是我想要的 有时它会消失 另外 创建的新按钮是重叠的 我不知道如何解决这个问题并拥有更好的外观 var coorA var coo
  • 使用 Shiny 发布平行坐标图表时出现“错误:路径[1]="”:没有这样的文件或目录”

    我有一个似乎很常见但我还没有找到解决方案的问题 当尝试使用 rCharts Parcoords 发布 Web 应用程序时 出现以下错误 错误 路径 1 没有这样的文件或目录 奇怪的是 该应用程序在我的笔记本电脑上运行得很好 下面是我正在使用
  • 如何计算特定字符在字符串中出现的次数

    我正在尝试创建一个函数来查看数组中的任何字符是否在字符串中 如果是 有多少个 我尝试计算每一种模式 但是太多了 我尝试使用 Python 中的 in 运算符的替代方案 但效果不佳 function calc fit element var
  • 使用 Google 日历源时如何禁用 FullCalendar 中的活动链接?

    我正在使用 FullCalendar 库从 Google 日历加载日历中的事件 不幸的是 事件添加到日历后 它们是可点击的 当您点击该活动时 您会自动重定向到 Google 日历页面以查看该特定活动 或者如果您有足够的访问权限 则可以直接对
  • 表单发布请求并存储收到的数据

    我有一个非常简单的表单 在提交时发出发布请求
  • 如何使用 JavaScript 或 jQuery 克隆 HTML 元素的样式对象?

    我正在尝试克隆元素的样式对象 这应该允许我在更改后重置所述元素的样式 例如 el style left 50px curr style left 50px Modify the elements style The cloned style
  • 如何从浏览器向服务器发送“页面将关闭”消息?

    我想向每个 html 文档添加一个脚本 JavaScript 该脚本向服务器发送两条消息 页面确实打开了 页面将关闭 此消息包含页面打开的时间 打开消息应在文档加载时 或加载完成时 发送 这是简单的部分 The close message
  • 使用 next.js 进行服务器端渲染与传统 SSR

    我非常习惯 SSR 意味着页面得到完全刷新并从服务器接收完整 HTML 的方法 其中根据后端堆栈使用 razor pub other 进行渲染 因此 每次用户单击导航链接时 它只会向服务器发送请求 整个页面将刷新 接收新的 HTML 这就是
  • 如何通过索引访问 JSON 对象中的字段

    我知道这不是最好的方法 但我别无选择 我必须通过索引访问 JSONObject 中的项目 访问对象的标准方法是只写this objectName or this objectName 我还找到了一种获取 json 对象内所有字段的方法 fo
  • 测量窗口偏移

    有没有一种方法可以测量 jQuery 中窗口的偏移量 以便我可以比较 固定 元素和相对定位元素的位置 我需要能够知道窗口滚动了多远 以便我可以使用该图来计算固定元素的高度 相对于视口顶部 和相对对象的高度 相对于顶部 之间的差异文件的内容

随机推荐

  • 禁止带有 `static_assert` 的函数

    我想阻止某些函数被调用 让我们忽略通过函数指针或其他东西调用函数的情况 只关注直接函数调用的情况 我可以这样做 delete 然而 发布的诊断信息并不丰富 我考虑过使用static assert 您可以使用它提供自定义诊断消息 我放置了一个
  • 将二维数组(字符串)存储到文件并检索它

    我制作了一个简单的程序 其中有一个存储大量数据的 2D 字符串数组 我搜索了很多地方来了解如何存储和检索二维数组 我想在程序结束时将数据保存在数组中 并在程序启动时检索该数据 我努力了 ObjectOutputStream toFile n
  • 如何将 java.lang.String 的空白 JSON 字符串值反序列化为 null?

    我正在尝试将一个简单的 JSON 反序列化为 java 对象 然而我却变得空虚String值java lang String属性值 在其余属性中 空白值将转换为null值 这就是我想要的 下面列出了我的 JSON 和相关的 Java 类 J
  • 从 python 中的标签名称中抓取数据

    您好 我正在尝试从网站上抓取用户数据 我需要用户 ID 该 ID 可在标签名称本身中找到 我正在尝试使用 python selenium 和 beautiful soup 中的 UID 来抓取div tag Example lt div i
  • 使用 Android 本机应用程序中的 ADAL 库对 Azure AD 上的用户进行身份验证

    我们有一个要求 用户应该从本机应用程序 Android iOS 登录 而不从应用程序调用 Microsoft 登录 Web 视图窗口 我们有示例代码 演示使用 net 控制台应用程序中的用户名和密码对 Azure AD 进行非交互式身份验证
  • FreeSwitch + Mode Verto + Webrtc + Android + 无法从 android 拨打电话

    我做了一个mode verto安卓客户端 使用WebRtc 预建库 org webrtc google webrtc 1 0 libjingle io pristine libjingle 11139 aar and 自由切换但只成功进行单
  • 启动 JavaFX 应用程序时的内部 NPE

    所以基本上我开始了一个虚拟的 JavaFX 项目 只是为了为我的实际问题实现一个简约的示例 但现在我什至无法再运行那个简约的项目 也没有收到足够的错误信息来自己用谷歌搜索出来 所以现在 当我运行代码时 我收到给定的错误堆栈 这不会引导我到任
  • Biztalk 和调用 Web 服务的最佳方式

    我正在编写一个 biztalk 编排 需要调用一个 Web 服务 可能是多个 Web 服务 而且可能不止一次 我面前有两个选择 一 在单独的代码项目中使用 wsdl 并从表达式形状的代码中调用 Web 服务 二 从 Biz 使用它 获取架构
  • 无法在 MySQL 中获得正确的编码

    一段时间以来 我一直在努力解决 MySQL 中的编码问题 我正在建立一个数据库 其中不仅包含拉丁文 还包含西里尔文和阿拉伯文文本 这是我如何创建数据库的示例 CREATE DATABASE db1 DEFAULT CHARACTER SET
  • 错误:该位置没有任何可重复的内容

    我有一个文本文件 其中包含俚语及其用真正的英语替代的列表 我使用 作为分割点将此文本文件转换为字典 并且在转换后打印字典时一切似乎都正常 但是 源自此行的错误 slangs re re compile join slang dict key
  • 对两个给定日期之间的集合日期字段进行排序

    我想根据两天之间的日期字段对列表进行排序 比如从现在到接下来的三天 排序列表应从现在开始和接下来的 3 天按升序排列 之后的所有先前和未来日期按升序排列 e g List
  • 如何在多个 EJB 之间共享 Java 缓存系统 (JCS) 资源

    我使用 JCS 来存储 ldap 搜索结果 该结果应由多个 EJB 共享 我创建了一个单例类来仅初始化 JCS 一次 但由于 EJB 的类加载器 它已使用自己的副本初始化了多次 所以搜索资源不共享 你们如何解决需要在多个 bean 之间共享
  • 如何让应用程序在后台保持唤醒状态

    我编写了一个应用程序 该应用程序连接到蓝牙设备并在汽车 在后台 和导航 或其他东西 在前台使用 但在 Android 7 也可能是 6 上 应用程序会在一段时间后进入睡眠状态 当我尝试从相机拍照时 睡眠模式 立即生效 我的应用程序现在正在睡
  • 从基类方法调用基类重写函数

    public class A public void f1 String str System out println A f1 String this f1 1 str public void f1 int i String str Sy
  • 检测精灵套件中的碰撞

    我正在尝试使用精灵套件制作一个简单的游戏 基本思想是 有一名玩家可以跳跃以避免阻挡 但我有一个问题 我不知道如何做到当玩家击中方块时玩家消失并且血液动画开始 首先 我不明白我在苹果网站上找到的这段代码的作用 static const uin
  • 一个 docker 用户可以向另一个用户隐藏数据吗?

    Alice 和 Bob 都是同一主机上 docker 组的成员 Alice 想要在 Docker 容器中运行一些长时间运行的计算 然后将结果复制到她的主文件夹中 Bob 非常爱管闲事 Alice 不希望他能够读取她的计算所使用的数据 系统管
  • Leaflet js:如何在地图上绘制任何标记结束时获取纬度和经度

    我得到了一个接近的代码 但我不确定 因为我是第一次使用 Leaflet js 我的意图是 假设 Leaflet js 正在显示地图或非地理数据 并且我有一个与 Leaflet js 相关的工具栏 工具栏有许多标记 如圆形 多边形 方形等 当
  • 我正在尝试获取所有发表超过 3 篇作品的作者的列表 - DBpedia Sparql

    我正在尝试获取已完成 3 项或以上工作的所有作者的列表 在 DBpedia 中 我的示例可以运行在 http dbpedia org sparql 基本代码 select count work as totalWork author Whe
  • magento订单列表查询

    我想选择 Magento 中所有订单的列表 这是我目前正在处理的另一个 PHP 应用程序中显示来自 magento 的所有订单列表所必需的 也有人可以使用 Magento 约定给我写代码 例如Mage 我使用 Magento 1 4 2 版
  • 在 Shiny 中同步两个 Highchart - 输入更改时不调用 JS

    相关于上一篇文章我提出 我想在 R Shiny 中的一个单独但同步的 Highcharter 图中调用单击事件时 在两个方向上更新一个 Highcharter 图中的点以更改颜色 我能够在 R Shiny 中同步两个 Highcharter