2014-02-20 4 views
6

출력 결과가 2x2 매트릭스 유형 그리드 레이아웃이므로 shiny 및 rchart로 여러 차트를 실행하여 출력 표시 옵션을 덮어 쓸 수 있습니다.반짝이 rcharts 여러 차트 출력

require(rCharts) 
require(shiny) 
require(data.table) 
runApp(list(
    ui = mainPanel(span="span6", 
    showOutput("chart2", "Highcharts"), 
    showOutput("chart3", "Highcharts"), 
    showOutput("chart4", "Highcharts") 
    ), 
    server = function(input, output){ 
     output$chart3 <- renderChart({ 
     a <- hPlot(Pulse ~ Height, data = MASS::survey, type = "bubble", title = "Zoom demo", subtitle = "bubble chart", size = "Age", group = "Exer") 
     a$chart(zoomType = "xy") 
     a$chart(backgroundColor = NULL) 
     a$set(dom = 'chart3') 
     return(a) 
    }) 
    output$chart2 <- renderChart({ 
     survey <- as.data.table(MASS::survey) 
     freq <- survey[ , .N, by = c('Sex', 'Smoke')] 
     a <- hPlot(x = 'Smoke', y = 'N', data = freq, type = 'column', group = 'Sex') 
     a$chart(backgroundColor = NULL) 
     a$set(dom = 'chart2') 
     return(a) 
    }) 
    output$chart4 <- renderChart({ 
     survey <- as.data.table(MASS::survey) 
     freq <- survey[ , .N, by = c('Smoke')] 
     a <- hPlot(x = "Smoke", y = "N", data = freq, type = "pie") 
     a$plotOptions(pie = list(size = 150)) 
     a$chart(backgroundColor = NULL) 
     a$set(dom = 'chart4') 
     return(a) 
    }) 
    } 
)) 

답변

6

변경 UI가에 :

ui = bootstrapPage(mainPanel( 
     div(class = "row", 
     div(showOutput("chart2", "Highcharts"), class = "span4"), 
     div(showOutput("chart3", "Highcharts"), class = "span4") 
    ), 
     div(class = "row", 
     div(showOutput("chart4", "Highcharts"), class = "span4") 
    ) 
    )) 

는 부트 스트랩 라이브러리를 사용하기 반짝 말할 bootstrapPage를 추가합니다. http://getbootstrap.com/2.3.2/scaffolding.html을보고 "스캐 폴딩"에 대한 아이디어를 얻으십시오. mainPanel의 너비 옵션의 기본값은 8입니다. 이것은 부트 스트랩의 span8입니다. 위의 코드는 이상적이지는 않지만 잘하면 시작입니다.

EDIT : mainPanel은 (..., 폭 = 폭) 폭의 스팬 DIV 단지 편리한 함수임을 전체 스크린

ui = bootstrapPage(mainPanel(width = 12, 
     div(class = "row", 
     div(showOutput("chart2", "Highcharts"), class = "span6"), 
     div(showOutput("chart3", "Highcharts"), class = "span6") 
    ), 
     div(class = "row", 
     div(showOutput("chart4", "Highcharts"), class = "span6") 
    ) 
    )) 

참고.

결과의 스크린 샷 :

enter image description here

+0

정말 고맙습니다. 사물의 빛나는 측면에서 mainPanel만으로 전체 화면으로 확장됩니까? 또는 sidePanel과 같은 것을 사용해야하지만, span을 sidePanel과 MainPanel의 span6과 같은 것으로 변경해야합니까? – digdeep

+0

'mainPanel'은 기본적으로 span을 설정하는'width' 옵션으로'div'를 설정하고 있습니다. mainPanel에'width = 12' 옵션을 추가하고 inner div의 클래스를'span6'으로 변경하면 원하는 것을 얻을 수 있습니다. – jdharrison

+2

@ jdharrison, 귀하의 허락하에 결과 스크린 샷을 추가했습니다. – PatrickT

1

R 빛나는 출신이다 또 다른 해결책 (HTML의 외부 지식없이)는 컬럼의 아이디어를 사용하는 것입니다.

ui = mainPanel(fluidPage(
    fluidRow(
     column(width=6, 
      showOutput("chart2", "Highcharts"), 
      showOutput("chart3", "Highcharts") 
    ), 
    fluidRow(
     column(width=6, 
      showOutput("chart4", "Highcharts") 
     ) 
    ) 
    ) 
)),