如何在没有注释的情况下显示在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"上会产生一个带有"韩国"的工具提示

我希望每个点都有一个工具提示,最好完全符合文本要求 - 尽管将文本设置为""具有最小的高度/宽度值可能就足够了.我还想以一个带有日期和工具提示列的文件以编程方式附加dyAnnotations

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

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

Answer 1

Dygraphs 的大部分定制都发生在CSS样式中。例如，以下是我们如何更改默认工具提示行为。考虑到这一点，并在Dygraphs 注释文档的帮助下，我们可以对第一个问题执行类似的操作。

# 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

好吧，正如所承诺的，这里是我们如何使用图例为您提供信息的开始。我们粗暴地改写了传说。如果您也想要传奇，这种行为可以变得更加礼貌。此外，您可以提供一个带有data.frame来查找x并返回信息丰富的描述。

我添加了一个debugger，所以如果你在 Chrome 等中打开调试器，你可以看到发生了什么。

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

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

#  explore the legend route
#    add to legend rather than replace
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
      var legendel = e.target.parentNode.parentNode
        .querySelectorAll(".dygraph-legend")[0];

      // should get our htmlwidget
      legendel.innerHTML = legendel.innerHTML + "<br>" + customLegend[row];
      }'
            ,# supply a vector or text that you would like
      jsonlite::toJSON(rep('something here',length(as.vector(presidents))))
    )
  )