R 반짝이/rcharts에서 렌더링 후 highcharts plotband 추가

Question

rCharts 및 shiny를 실행하는 응용 프로그램에서이 (jsfiddle) 하이 차트 기능을 복제하려고합니다. 이미 렌더링 된 플롯에 플롯 밴드를 추가하기 위해 사용자 이벤트 (텍스트 상자의 값 변경)를 원합니다. (이상적으로는 이전/이전을 제거하십시오.) xAxis 옵션에서 plotband를 사용하여 플롯을 다시 그려서 작업을 수행 할 수는 있지만, 그리는 일부 플롯에서는 속도가 느려질 수 있습니다.

기능이 r 패키지에 있는지 모르겠지만 기능을 실행하기 위해 javascript에 드롭 할 수있는 방법이 있습니까?

library(shiny) 
library(plyr) 
library(rCharts) 
shinyServer(function(input, output,session){ 
    output$h1chart <- renderChart({ 
    h1 <- rCharts::Highcharts$new() 
    h1$chart(type = "spline") 
    h1$series(data = c(1, 3, 2, 4, 5, 4, 6, 2, 3, 5, NA), dashStyle = "longdash") 
    h1$series(data = c(NA, 4, 1, 3, 4, 2, 9, 1, 2, 3, 4), dashStyle = "shortdot") 
    h1$legend(symbolWidth = 80) 
    h1$xAxis(title = list(text = "Test Plot"),startOnTick=TRUE,min=1,max=9,endOnTick=TRUE, 
      plotBands = list(list(from=1.5,to=3.5,color='rgba(68, 170, 213, 0.1)',label=list(text="1",style=list(color="#6D869F"),verticalAlign="bottom")))) 
    h1$set(dom="h1chart") 
    return(h1) 
    }) 
    output$selectedOut <- renderUI({ 
    numericInput("selected", "", value=2.5) 
    }) 
    output$windowOut <- renderUI({  
    sliderInput(inputId="window",label="Window size around selected point:",min=1,max=5,value=2) 
    }) 
})#end server 

ui.R

server.R :

가 여기에 최소한의 작업 예제

library(shiny) 
library(plyr) 
library(rCharts) 
shinyUI(pageWithSidebar(
    headerPanel(""), 
    sidebarPanel(
    wellPanel(
     h6("Change here should update plotband:"), 
     uiOutput("selectedOut"), 
     uiOutput("windowOut") 
    ), 
    tags$head(tags$style(type="text/css", ".jslider { max-width: 245px; }"),tags$style(type='text/css', ".well { max-width: 250px; }"), 
      tags$style(type='text/css', ".row-fluid .span4 {width: 20%}\n.row-fluid .span8 {width: 75%}")) 
), 
    mainPanel(showOutput("h1chart","highcharts")) 
)) 

나는이 기능을 숫자 상자/슬라이더에 대한 변경 사항을 캡처 할 수 있습니다 :

addPB <- reactive({ 
    center <- as.numeric(input$selected[[1]]) 
    winHigh <- center+input$window[1] 
    winLow <- center-input$window[1] #eventually I would use winLow/winHigh to change the plotband range 
    list(winLow=winLow,winHigh=winHigh) 
}) 
observe(print(addPB()$winLow)) 

그리고 나는 그들을 실행하는 자바 스크립트 함수를 구축했지만, 이것이 자바 스크립트로 highchart 객체에 액세스하는 방법 또는 반짝 이는에서 실행하는 코드를 얻는 방법이 있다면 나는하지 않습니다.

#!function(){$('#container').highcharts().xAxis[0].addPlotBand({from: 2,to: 4, color: 'rgba(68, 170, 213, 0.1)', label: 'asdf'}); } !# 

Answer 1

Shiny로 전달되는 메시지를 사용하여이 작업을 수행 할 수 있습니다. 다음은 작동 방식입니다. 슬라이더 또는 numericInput의 데이터를 변경할 때마다 메시지가 session$sendCustomMessage과 json 페이로드 (이 경우 band)를 사용하여 서버로 전송됩니다.

서버 쪽에서 메시지는 Shiny.addCustomMessageHandler에 의해 수신됩니다. 기존 밴드에 액세스하여 제거한 다음 핸들러에서 수신 한 옵션을 사용하여 새 밴드를 만듭니다. 반짝 전달 메시지에 대한 자세한 개요를

, 나는 server.R 및 ui.R

# addition to server.R 
observe({ 
    center <- as.numeric(input$selected[[1]]) 
    winHigh <- center + input$window[1] 
    winLow <- center - input$window[1] 
    #eventually I would use winLow/winHigh to change the plotband range 
    band = list(from = winLow, to = winHigh, color = "rgba(68, 170, 213, 0.1)") 
    print(band) 
    session$sendCustomMessage(type = "customMsg", band) 
}) 

# addition to ui.R 
mainPanel(
    showOutput("h1chart","highcharts"), 
    tags$script('Shiny.addCustomMessageHandler("customMsg", function(bandOpts){ 
    chartXAxis = $("#h1chart").highcharts().xAxis[0] 
    chartXAxis.removePlotBand() 
    chartXAxis.addPlotBand(bandOpts) 
    })') 
) 

에 다음 코드를 추가하여이 마크 HECKMANN에 의해 ​​ excellent blog post

읽는 것이 좋습니다