어떻게 주석

Question

내가 제공 한 예는 유혹 차트

결과

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

입니다 dygraphs

의 R 구현을 사용하려고하지 않고 dygraphs에 표시 툴팁을 얻을 수 있습니다 'A'는 '한국'이라는 도구 설명을 생성합니다.

나는 모든 점에 대해 툴팁을 사용하고 싶습니다. 요구 사항 - 최소 높이/너비 값으로 텍스트를 ""(으)로 설정하더라도 충분할 수 있습니다. 또한, 어떻게 그렇다면, 날짜와 툴팁 열

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

이 가능하고, 가진 파일에서 프로그래밍 dyAnnotations을 첨부 할 것인가? TIA

Answer 1

좋아, 약속대로, 우리가 정보에 대한 전설을 사용하는 방법에 시작이다 달성 할 수있는 한 가지 방법입니다. 전설을 엄하게 덮어 씁니다. 이 동작은 범례를 원한다면 훨씬 더 정중하게 만들 수 있습니다. 또한 data.frame이라는 객체/해시를 제공하여 x을 조회하고 유익한 설명을 제공 할 수 있습니다.

크롬에 디버거를 열면 어떤 일이 일어나고 있는지 확인할 수 있습니다. 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)))) 
     ) 
    ) 

, 나는 전설에 추가하는 대신 대체하기 위해 변경되었습니다.

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

Answer 2

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