如何在没有注释的情况下获得在dygraphs中显示的工具提示

2023-12-24

我正在尝试使用 dygraphs 的 R 实现

提供的示例是

library(dygraphs)

dygraph(presidents, main = "Presidential Approval") %>%
dyAxis("y", valueRange = c(0, 100)) %>%
dyAnnotation("1950-7-1", text = "A", tooltip = "Korea") %>%
dyAnnotation("1965-1-1", text = "B",  tooltip = "Vietnam")

which results in the chartenter image description here

将鼠标悬停在“A”上会生成带有“Korea”的工具提示

我渴望为每个点提供一个工具提示,最好完全免除文本要求 - 尽管将文本设置为具有最小高度/宽度值的“”可能就足够了。我还想以编程方式从包含日期和工具提示列的文件附加 dyAnnotations

df <- data.frame(date=as.Date(c("1950-7-1","1965-1-1")),tooltip=c("Korea","Vietnam"))

这是否可行?如果可行,如何实现? TIA


Dygraphs 的大部分定制发生在CSS造型。例如,这是如何 https://gist.github.com/timelyportfolio/cf7b94048ffe7b6a0112我们可以更改默认的工具提示行为。考虑到这一点并得到一些帮助Dygraphs注释文档 http://dygraphs.com/annotations.html,我们可以对第一个问题做这样的事情。

# answers Stack Overflow question
#   http://stackoverflow.com/questions/27671576/how-can-i-get-tooltips-showing-in-dygraphs-without-annotation
# on how to customize annotations

library(dygraphs)

# question is two parts - let's handle part 1 first
dygraph(presidents, main = "Presidential Approval") %>%
  dyAxis("y", valueRange = c(0, 100))  %>%
  dyAnnotation("1950-7-1", text = "Korea", tooltip = ""
               # this is not necessary but think it better to be specific
               ,cssClass = "specialAnnotation") %>%
  # will leave this as before 
  dyAnnotation("1965-1-1", text = "Vietnam", tooltip = "") -> dyG

#this is a hack to set css directly
#  dyCSS designed to read a text css file
dyG$x$css = "
  /* if cssClass not assigned use .dygraphDefaultAnnotation */
  /*  !important is critical for the rules to be applied */
  .specialAnnotation {
    overflow: visible !important;
    width: initial !important;
  }
"

对于第二个问题,这是我们可以实现这一目标的一种方法

# now for part 2 
dyG = dygraph(presidents, main = "Presidential Approval") %>%
  dyAxis("y", valueRange = c(0, 100))

tooltips = list(
  list(x = "1950-7-1", tooltip = "", text = "Korea")
  ,list(x = "1965-1-1", tooltip = "", text = "Vietnam")
) 

annotator <- function(x,y){
  d = do.call(dyAnnotation,modifyList(list(dygraph=x),y))
  return(d)
}

dyG = Reduce( annotator, tooltips, init=dyG )

#this is a hack to set css directly
#  dyCSS designed to read a text css file
dyG$x$css = "
  /* if cssClass not assigned use .dygraphDefaultAnnotation */
  /*  !important is critical for the rules to be applied */
  .dygraphDefaultAnnotation {
    overflow: visible !important;
    width: initial !important;
    border: none !important;
    font-size: 200% !important;
  }
"

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

如何在没有注释的情况下获得在dygraphs中显示的工具提示 的相关文章

  • R: pi[[j]] 中的错误:下标越界——数据帧列表上的 rbind

    我正在尝试重新绑定一个大的数据帧列表 outputDfList 它是通过将一个复杂的函数应用于一个大表而生成的 您可以通过以下方式重新创建outputDfList df1 data frame randomseq chr15q22 1 tr
  • R grep:有 AND 运算符吗?

    假设我有以下数据框 User Id Tags 34234 imageUploaded people jpg more comma separated stuff 34234 imageUploaded 12345 people jpg 我如
  • 方向改变后的javascript最大视口高度Android和iOS

    目标 查找设备的最大视口高度 包括设备的空间address bar这样我们就可以动态调整 min body 的大小并将内容向上推 问题 移动浏览器处理方向状态的方式不同 方向变化时更新 DOM 属性的方式也不同 使用 JavaScript
  • 流媒体性能 - Canvas 与

    我正在开发一个应用程序 需要通过 webSocket 连接以每秒至少 30 帧的速度持续传输图像 我遇到了一些性能问题 并希望尽我所能进行优化 我想知道使用不断更新的图像之间的性能差异是什么 就像这样 img src someDynamic
  • 将其作为参数传递给 addEventListener()

    我想添加change一组复选框的事件 我如何访问this在我的事件函数中 这样当我执行事件时我可以访问复选框的值 这是我当前的代码 var checkboxes document getElementsByClassName cb Arra
  • 强制执行 show.bind

    我有一个包含数据的表 当从另一个视图触发事件时 我希望视图检查 show bind 语句 问题是该事件没有更改当前视图中的任何数据 foo html tr p canBeRemoved p tr 我正在使用 EventAggregator
  • jQuery 中如何判断 JSON 对象是否为空

    我有以下 JSON meta limit 20 next null offset 0 previous null total count 0 objects 我对对象感兴趣 我想知道对象是否为空并显示警报 像这样的东西 success fu
  • React JS“this”没有按预期工作

    我有下面的代码 save function var this this console log this refs itemText this setState isEditing false function console log In
  • 如何将表输出复制到剪贴板?

    我试图通过单击按钮将表输出复制到剪贴板 我尝试查看 rclipboard 包 但以我有限的理解 它似乎无法复制输出 我添加了一个actionButton屏幕截图中带有一个图标来显示我想要实现的目标 现在按钮没有任何作用 Code libra
  • Caret 和 GBM:任务 1 失败 - “参数意味着行数不同”

    我正在尝试使用以下代码运行带插入符号的 GBM library caret library doParallel detectCores registerDoParallel detectCores 1 set seed 668 in tr
  • 如何更改 Vuetify 日历日期格式

    我正在尝试在以下 Vuetify 日历上启用输入事件 https github com vuetifyjs vuetify blob master packages docs src examples calendars complex e
  • 如何使用 JavaScript 播放任意 MIDI 音符?

    澄清一下 我不想生成 MIDI 文件 也不想播放 MIDI 文件 我希望即时播放 MIDI 音符 我尝试使用https github com mudcube MIDI js https github com mudcube MIDI js作
  • 根据数据更改图例颜色高图表

    我可以根据数据动态设置列的颜色 但无法弄清楚如何更改图例中的颜色 请注意 jsfiddle 最新的条形图是绿色的 但图例是蓝色的 有没有办法改变列颜色也会改变图例颜色 这是我用于列颜色的代码 jsfiddle http jsfiddle n
  • 谷歌浏览器如何启动桌面应用程序?

    我真的不知道术语 所以我将从一个例子开始 如果我点击磁力链接 Google Chrome 会询问我是否要启动 torrent 客户端 我单击 确定 chrome 启动该应用程序 该应用程序根据链接执行一些操作 现在有办法查看应用程序如何从
  • D3 时间解析返回 null

    根据此页面上的说明 https github com mbostock d3 wiki Time Formatting https github com mbostock d3 wiki Time Formatting我正在尝试解析 ISO
  • jQuery 单击附加元素不起作用

    我有一个数组 我正在从 Array 获取数据并在 jQuery Append to list 中使用它 但是当我单击列表项时 它只显示最后一个元素 var array 1 2 7 3 4 8 5 6 9 for var i 0 i lt a
  • 在 Sublime Text 下获取完整的 JS 自动补全

    我刚刚在 Windows Vista 下安装了 Sublime Text 甚至遵循了中给出的建议这个帖子 https stackoverflow com questions 10636410 modifying sublime text 2
  • 如何使用 gvisMotionChart 处理 POSIXlt 格式时间?

    The googleVisR软件包出奇的好 然而 我对一个问题感到困惑gvisMotionChart关于 timevar 因为我的数据集中的时间是POSIXlt格式 例如 2009 07 02 19 00 00 2009 07 02 20
  • 使用 Three.js 中的设备方向控件进行对象旋转

    我正在迈出使用 JavaScript 进行编码并使用 Three js 的第一步 我正在尝试 Threejs org 的这个例子 http trijs org examples misc controls deviceorientation
  • 调试客户端时使用 Chrome/Firefox

    我正在使用带有 getUserMedia 的相机 但出现了一些需要修复的错误 问题是 Visual Studio 只允许我使用 IE 调试 JavaScript 我的意思是命中断点 而 IE 不支持 getUserMedia 如果您想在 I

随机推荐