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

Question

我正在尝试使用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")

会生成图表

将鼠标悬停在'A'上会产生一个带有'Korea'的工具提示

我热衷于为每个点提供工具提示，最好完全符合文本要求 - 尽管将文本设置为“”具有最小的高度/宽度值可能就足够了。我还想以编程方式从带有日期和工具提示列的文件中附加dyAnnotations

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

这是可行的，如果是的话，怎么样？ TIA

Answer 1

大多数Dygraphs自定义都发生在CSS样式中。例如，here is how我们可以更改默认的工具提示行为。考虑到这一点以及Dygraphs annotation documentation的一些帮助，我们可以针对第一个问题做这样的事情。

# 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

Answer 2

好的，正如所承诺的，这是我们如何使用图例来获取您的信息的开始。我们粗略地覆盖了传说。如果您还想要一个图例，这种行为可以更有礼貌。此外，您可以提供带有product_created+5days > NOW()的对象/哈希来查找data.frame并返回信息性说明。

我添加了x，因此如果您在Chrome等中打开调试器，则可以看到发生了什么。

debugger

下面，我已更改为添加到图例而不是替换。

library(dygraphs)

dyG = dygraph(presidents, main = "Presidential Approval") %>%
    dyAxis("y", valueRange = c(0, 100))

#  explore the legend route
dyG %>%
    dyCallbacks(
        highlightCallback = sprintf(
'function(e, x, pts, row) {

// added to illustrate what is happening
//   remove once satisfied with your code
debugger;  

var customLegend = %s

// should get our htmlwidget
e.target.parentNode.parentNode
  .querySelectorAll(".dygraph-legend")[0]
  .innerText = customLegend[row] + row;
}'
            ,# supply a vector or text that you would like
            jsonlite::toJSON(rep('something here',length(as.vector(presidents))))
        )
    )