在闪亮的应用程序中格式化/对齐 rCharts (nvd3) [英] Formatting/aligning rCharts (nvd3) in shiny app
本文介绍了在闪亮的应用程序中格式化/对齐 rCharts (nvd3)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在开发一个 Shiny 应用程序，我希望它看起来像下图:
然而，当我试图实现这一点时，我只能得到以下形式:
我正在寻找如何整齐地收集输出，并希望得到任何帮助.我在这里查看了其他几个类似的问题，即.this 和 this，但不要认为他们回答了我的问题(第一次谈到添加 mainPanel，但我是使用 FludiPage 和 FluidRows.我原以为列和行会自动调整到屏幕大小，而 12 列旨在适应屏幕大小，但显然我是错了吗?
非常感谢您的帮助.
用于复制/粘贴的 Server.R 文件.抱歉，有点长:
<预><代码>### 加载库、脚本、数据图书馆(闪亮)图书馆(shinyapps)图书馆(闪亮的仪表板)图书馆(dplyr)图书馆(整理)图书馆(润滑)图书馆(htmlwidgets)选项(闪亮的.trace = TRUE，闪亮.maxRequestSize=300*1024^2)##闪亮的服务器端程序的主体闪亮服务器(功能(输入，输出，会话){dataList <- 反应式({if(is.null(input$uploadFile)){返回(空)}uploadFileInfo <- input$uploadFileuploadData <- read.csv(uploadFileInfo$datapath, header = TRUE, stringsAsFactors = FALSE)上传数据 <- tbl_df(uploadData) %>%变异(年值 = 年(日期值)，月值 = 月(日期值))sumData1 <- 上传数据 %>%选择(yearValue，earnPts，earnCount，redemPts，redemCount，churnCount，acquisCount)%>%收集(指标，总计，-yearValue)%>%group_by(yearValue,metrics)%>%summarise(yearlyTotals = sum(totals)) %>%安排(每年总计)sumData2 <- 上传数据 %>%选择(yearValue，monthValue，earnPts，earnCount，redemPts，redemCount，churnCount，acquisCount)%>%收集(指标，总计，-c(yearValue，monthValue))％>％group_by(yearValue,monthValue,metrics)%>%summarise(yearmonthTotals = sum(totals)) %>%排列(年值，月值)%>%group_by(yearValue,metrics)%>%变异(累积 = cumsum(yearmonthTotals))sumData3 <- 上传数据 %>%选择(yearValue，monthValue，earnPts，earnCount，redemPts，redemCount，churnCount，acquisCount)%>%group_by(yearValue,monthValue)%>%summarise_each(funs(mean))%>%圆形的()sumData4 <- 上传数据 %>%group_by(dateValues) %>%summarise_each(乐趣(总和))收入数据 <- sumData4 %>%选择(earnPts，earnCount)row.names(earnData) <- sumData4$dateValuesredempData <- sumData4%>%选择(赎回，赎回计数)row.names(earnData) <- sumData4$dateValuescustData <- sumData4 %>%选择(流失计数，acquisCount)row.names(earnData) <- sumData4$dateValuessumData5 <-uploadData %>%group_by(dateValues) %>%summarise_each(乐趣(总和))获得TSData<-sumData5%>%选择(earnPts，earnCount)row.names(earnTSData) <- sumData5$dateValuesredemTSData <- sumData5%>%选择(赎回，赎回计数)row.names(redemTSData) <- sumData5$dateValuescustTSData <- sumData5%>%选择(acquisCount，churnCount)row.names(custTSData) <- sumData5$dateValuesdfList <- list(sumData1 = sumData1, sumData2 = sumData2, sumData3 = sumData3,sumData4 = sumData4，earnData = earnData，redempData = redempData，custData = custData，sumData5 = sumData5，eartTSData = EarTSData，redemTSData = redemTSData, custTSData = custTSData)返回(dfList)})###主图output$outlinesChart <- renderChart2({myData <- dataList()$sumData1mainPlot <- nPlot(yearlyTotals ~ 指标，组 = 'yearValue'，数据 = myData，类型 = 'multiBarChart')mainPlot$chart(margin=list(left=100))rm(我的数据)返回(主图)})### 信息框output$infoBox1 <- renderInfoBox({信息框("进度", 10*2, icon = icon("line-chart"),颜色 = "蓝色")})output$infoBox2 <- renderInfoBox({信息框("进度", 10*2, icon = icon("line-chart"),颜色 = "蓝色")})output$infoBox3 <- renderInfoBox({信息框("进度", 10*2, icon = icon("line-chart"),颜色 = "蓝色")})output$infoBox4 <- renderInfoBox({信息框("进度", 10*2, icon = icon("line-chart"),颜色 = "蓝色")})output$infoBox5 <- renderInfoBox({信息框("进度", 10*2, icon = icon("smile-o"),颜色 = "蓝色")})output$infoBox6 <- renderInfoBox({信息框("进度", 10*2, icon = icon("皱眉-o"),颜色 =紫色"，填充 = TRUE)})### 积分累积图表输出$cEarnPtsChart <- renderChart2({myData <- dataList()$sumData2临时数据 <- myData %>% 过滤器(指标 == 'earnPts')myPlot <- nPlot(cumulatives ~ monthValue, group = 'yearValue',数据 = 临时数据，类型 = 'lineChart')rm(我的数据)rm(临时数据)返回(我的情节)})###赚取交易计数的累积图表output$cEarnCountChart <- renderChart2({myData <- dataList()$sumData2临时数据 <- myData %>% 过滤器(指标 == 'earnCount')myPlot <- nPlot(cumulatives ~ monthValue, group = 'yearValue',数据 = 临时数据，类型 = 'lineChart')rm(我的数据)rm(临时数据)返回(我的情节)})###兑换积分的累积图表输出$cRedemPtsChart <- renderChart2({myData <- dataList()$sumData2临时数据 <- myData %>% 过滤器(指标 == 'redemPts')myPlot <- nPlot(cumulatives ~ monthValue, group = 'yearValue',数据 = 临时数据，类型 = 'lineChart')rm(我的数据)rm(临时数据)返回(我的情节)})###赎回交易计数的累积图表output$cRedemCountChart <- renderChart2({myData <- dataList()$sumData2临时数据 <- myData %>% 过滤器(指标 == 'redemCount')myPlot <- nPlot(cumulatives ~ monthValue, group = 'yearValue',数据 = 临时数据，类型 = 'lineChart')rm(我的数据)rm(临时数据)返回(我的情节)})### 客户获取累积图表output$cAcquisChart <- renderChart2({myData <- dataList()$sumData2临时数据 <- myData %>% 过滤器(指标 == 'acquisCount')myPlot <- nPlot(cumulatives ~ monthValue, group = 'yearValue',数据 = 临时数据，类型 = 'lineChart')rm(我的数据)rm(临时数据)返回(我的情节)})### 客户获取累积图表output$cChurnChart <- renderChart2({myData <- dataList()$sumData2临时数据 <- myData %>% 过滤器(指标 == 'churnCount')myPlot <- nPlot(cumulatives ~ monthValue, group = 'yearValue',数据 = 临时数据，类型 = 'lineChart')rm(我的数据)rm(临时数据)返回(我的情节)})})ui.R 文件:
### 加载库图书馆(闪亮)图书馆(闪亮主题)### 用于闪亮 UI 的主体ShinyUI(navbarPage("My Sample Dashboard", theme = Shinytheme('readable'), inverse = TRUE,tabPanel("概览部分",流体行(列(6,##current 应用程序仅支持 CSV，因为这是一个概念证明...fileInput(inputId = 'uploadFile', label = '请上传您的文件'))),流体行(列(3，h4('主图表在这里'),showOutput('outlinesChart', 'nvd3')),列(3，偏移量 = 5，h5('信息框在这里'),infoBoxOutput('infoBox1'),infoBoxOutput('infoBox2'),infoBoxOutput('infoBox3'),infoBoxOutput('infoBox4'),infoBoxOutput('infoBox5'),infoBoxOutput('infoBox6'))),小时()，流体行(列(2，h5('赚取积分图表在此'),showOutput('cEarnPtsChart', 'nvd3')),列(2，偏移= 4，h5('Earn Count 图在这里'),showOutput('cEarnCountChart', 'nvd3'))),流体行(列(2，h5('兑换积分图表在此处'),showOutput('cRedemPtsChart', 'nvd3')),列(2，偏移= 4，h5('赎回计数图表在这里'),showOutput('cRedemCountChart', 'nvd3'))),流体行(列(2，h5('客户获取图表在这里'),showOutput('cAcquisChart', 'nvd3')),列(2，偏移= 4，h5('客户流失图表在这里'),showOutput('cChurnChart', 'nvd3')))),tabPanel("详细信息部分"),tabPanel("实验部分")))以下是生成要提供给此应用程序的 CSV 文件的代码.
earnPtsRange <- 12000:18000收入计数范围 <- 1000:10000redemPtsRange <- 10000:20000redemCountRange <- 10000:20000流失范围 <- 1000:10000采集范围 <- 800:15000### 从 Dirk Eddelbuettel 获得:https://stackoverflow.com/questions/14720983/efficiently-generate-a-random-sample-of-times-and-dates-between-two-datesgenerateDates <- function(N, st="2014/01/01", et="2015/08/31") {st <- as.POSIXct(as.Date(st))et <- as.POSIXct(as.Date(et))dt <- as.numeric(difftime(et,st,unit="sec"))ev <- sort(runif(N, 0, dt))rt <- st + evrt[订单(rt)]as.Date(rt)}##生成数据；20 个月中每个月的 10 个读数dateValues <- generateDates(200)收入点 <- 样本(x = 收入点范围，大小 = 190)收入计数 <- 样本(x = 收入计数范围，大小 = 190)redemPts <- 样本(x = redemPtsRange，大小 = 190)redemCount <- 样本(x = redemCountRange，大小 = 190)churnCount <- 样本(x = churnRange，大小 = 190)acquisCount <- 样本(x = 采集范围，大小 = 190)##合并生成的数据toyData <- data.frame(dateValues = dateValues，earnPts = earPts，earnCount = EarCount，redemPts = redemPts，redemCount = redemCount，churnCount = churnCountacquisCount = acquisCount)##将数据写入CSV文件write.csv(x = toyData, file = './toyDataset.csv', row.names = FALSE)非常感谢.
解决方案
我刚刚在我的 rCharts 分支上推送了我认为可以解决您的问题的方法.它解决了我的响应能力和使用 rCharts 自动调整大小的问题.您使用它的方式是在 showOutput 中指定宽度和高度参数.默认宽度为 100%，默认高度为 400px.示例调用是 showOutput("myGraph", "nvd3", height=555)
您可以从以下位置下载:https://github.com/clecocel/rCharts
您可以使用以下方法安装它:devtools::install_github("clecocel/rCharts")
I am developing a Shiny app which I hope to look like the picture below:
However, as I try to achieve this, I am only able to get the following form:
I am looking for how to make the output neatly collected, and would appreciate any help. I have looked at a couple of other similar questions here, viz. this and this, but don't think they answer my question (the first talks about adding a mainPanel, but I am using FludiPage and FluidRows. I had thought the columns and rows would automatically adjust to screen size, and that 12 columns are designed to fit into a screen size, but apparently I am wrong?
Many thanks for the help.
The Server.R file for copying/pasting. Apologies, it is a bit long:
#
#
# load libraries, scripts, data
library(shiny)
library(shinyapps)
library(shinydashboard)
library(dplyr)
library(tidyr)
library(lubridate)
library(htmlwidgets)
options(shiny.trace = TRUE,
shiny.maxRequestSize=300*1024^2)
## body of shiny server side program
shinyServer(function(input, output, session) {
dataList <- reactive({
if(is.null(input$uploadFile)){
return(NULL)
}
uploadFileInfo <- input$uploadFile
uploadData <- read.csv(uploadFileInfo$datapath, header = TRUE, stringsAsFactors = FALSE)
uploadedData <- tbl_df(uploadData) %>%
mutate(yearValue = year(dateValues), monthValue = month(dateValues))
sumData1 <- uploadedData %>%
select(yearValue, earnPts, earnCount, redemPts, redemCount, churnCount, acquisCount) %>%
gather(metrics, totals, -yearValue) %>%
group_by(yearValue, metrics) %>%
summarise(yearlyTotals = sum(totals)) %>%
arrange(yearlyTotals)
sumData2 <- uploadedData %>%
select(yearValue, monthValue, earnPts, earnCount, redemPts, redemCount, churnCount, acquisCount) %>%
gather(metrics, totals, -c(yearValue, monthValue)) %>%
group_by(yearValue, monthValue, metrics) %>%
summarise(yearmonthTotals = sum(totals)) %>%
arrange(yearValue, monthValue) %>%
group_by(yearValue, metrics) %>%
mutate(cumulatives = cumsum(yearmonthTotals))
sumData3 <- uploadedData %>%
select(yearValue, monthValue, earnPts, earnCount, redemPts, redemCount, churnCount, acquisCount) %>%
group_by(yearValue, monthValue) %>%
summarise_each(funs(mean)) %>%
round()
sumData4 <- uploadedData %>%
group_by(dateValues) %>%
summarise_each(funs(sum))
earnData <- sumData4 %>%
select(earnPts, earnCount)
row.names(earnData) <- sumData4$dateValues
redempData <- sumData4 %>%
select(redemPts, redemCount)
row.names(earnData) <- sumData4$dateValues
custData <- sumData4 %>%
select(churnCount, acquisCount)
row.names(earnData) <- sumData4$dateValues
sumData5 <- uploadedData %>%
group_by(dateValues) %>%
summarise_each(funs(sum))
earnTSData <- sumData5 %>%
select(earnPts, earnCount)
row.names(earnTSData) <- sumData5$dateValues
redemTSData <- sumData5 %>%
select(redemPts, redemCount)
row.names(redemTSData) <- sumData5$dateValues
custTSData <- sumData5 %>%
select(acquisCount, churnCount)
row.names(custTSData) <- sumData5$dateValues
dfList <- list(sumData1 = sumData1, sumData2 = sumData2, sumData3 = sumData3,
sumData4 = sumData4, earnData = earnData, redempData = redempData,
custData = custData, sumData5 = sumData5, earnTSData = earnTSData,
redemTSData = redemTSData, custTSData = custTSData)
return(dfList)
})
### The main chart
output$outlinesChart <- renderChart2({
myData <- dataList()$sumData1
mainPlot <- nPlot(yearlyTotals ~ metrics,
group = 'yearValue', data = myData, type = 'multiBarChart')
mainPlot$chart(margin=list(left=100))
rm(myData)
return(mainPlot)
})
### Information boxes
output$infoBox1 <- renderInfoBox({
infoBox(
"Progress", 10*2, icon = icon("line-chart"),
color = "blue"
)
})
output$infoBox2 <- renderInfoBox({
infoBox(
"Progress", 10*2, icon = icon("line-chart"),
color = "blue"
)
})
output$infoBox3 <- renderInfoBox({
infoBox(
"Progress", 10*2, icon = icon("line-chart"),
color = "blue"
)
})
output$infoBox4 <- renderInfoBox({
infoBox(
"Progress", 10*2, icon = icon("line-chart"),
color = "blue"
)
})
output$infoBox5 <- renderInfoBox({
infoBox(
"Progress", 10*2, icon = icon("smile-o"),
color = "blue"
)
})
output$infoBox6 <- renderInfoBox({
infoBox(
"Progress", 10*2, icon = icon("frown-o"),
color = "purple", fill = TRUE
)
})
### Cumulative chart for points earned
output$cEarnPtsChart <- renderChart2({
myData <- dataList()$sumData2
interimData <- myData %>% filter( metrics == 'earnPts')
myPlot <- nPlot(cumulatives ~ monthValue, group = 'yearValue',
data = interimData, type = 'lineChart')
rm(myData)
rm(interimData)
return(myPlot)
})
### Cumulative chart for count of earn transactions
output$cEarnCountChart <- renderChart2({
myData <- dataList()$sumData2
interimData <- myData %>% filter( metrics == 'earnCount')
myPlot <- nPlot(cumulatives ~ monthValue, group = 'yearValue',
data = interimData, type = 'lineChart')
rm(myData)
rm(interimData)
return(myPlot)
})
### Cumulative chart for points redeemed
output$cRedemPtsChart <- renderChart2({
myData <- dataList()$sumData2
interimData <- myData %>% filter( metrics == 'redemPts')
myPlot <- nPlot(cumulatives ~ monthValue, group = 'yearValue',
data = interimData, type = 'lineChart')
rm(myData)
rm(interimData)
return(myPlot)
})
### Cumulative chart for count of redemption transactions
output$cRedemCountChart <- renderChart2({
myData <- dataList()$sumData2
interimData <- myData %>% filter( metrics == 'redemCount')
myPlot <- nPlot(cumulatives ~ monthValue, group = 'yearValue',
data = interimData, type = 'lineChart')
rm(myData)
rm(interimData)
return(myPlot)
})
### Cumulative chart for Customer Acquisition
output$cAcquisChart <- renderChart2({
myData <- dataList()$sumData2
interimData <- myData %>% filter( metrics == 'acquisCount')
myPlot <- nPlot(cumulatives ~ monthValue, group = 'yearValue',
data = interimData, type = 'lineChart')
rm(myData)
rm(interimData)
return(myPlot)
})
### Cumulative chart for Customer Acquisition
output$cChurnChart <- renderChart2({
myData <- dataList()$sumData2
interimData <- myData %>% filter( metrics == 'churnCount')
myPlot <- nPlot(cumulatives ~ monthValue, group = 'yearValue',
data = interimData, type = 'lineChart')
rm(myData)
rm(interimData)
return(myPlot)
})
})
The ui.R file:
### load libraries
library(shiny)
library(shinythemes)
### body for Shiny UI
shinyUI(navbarPage("My Sample Dashboard", theme = shinytheme('readable'), inverse = TRUE,
tabPanel("Overview Section",
fluidRow(
column(6,
##current app only supports CSV, since this is a proof of concept...
fileInput(inputId = 'uploadFile', label = 'Please upload your file')
)
),
fluidRow(
column(3,
h4('Main Chart goes here'),
showOutput('outlinesChart', 'nvd3')
),
column(3, offset = 5,
h5('Info boxes go here'),
infoBoxOutput('infoBox1'),
infoBoxOutput('infoBox2'),
infoBoxOutput('infoBox3'),
infoBoxOutput('infoBox4'),
infoBoxOutput('infoBox5'),
infoBoxOutput('infoBox6')
)
),
hr(),
fluidRow(
column(2,
h5('Earned Points chart goes here'),
showOutput('cEarnPtsChart', 'nvd3')
),
column(2, offset = 4,
h5('Earn Count chart goes here'),
showOutput('cEarnCountChart', 'nvd3')
)
),
fluidRow(
column(2,
h5('Redeemed Points chart goes here'),
showOutput('cRedemPtsChart', 'nvd3')
),
column(2, offset = 4,
h5('Redemption Count chart goes here'),
showOutput('cRedemCountChart', 'nvd3')
)
),
fluidRow(
column(2,
h5('Customer Acquisition chart goes here'),
showOutput('cAcquisChart', 'nvd3')
),
column(2, offset = 4,
h5('Customer Churn chart goes here'),
showOutput('cChurnChart', 'nvd3')
)
)
),
tabPanel("Details Section"),
tabPanel("Experiments Section"))
)
Edit:
Following is a code to generate the CSV file to be fed to this app.
earnPtsRange <- 12000:18000
earnCountRange <- 1000:10000
redemPtsRange <- 10000:20000
redemCountRange <- 10000:20000
churnRange <- 1000:10000
acquisitionRange <- 800:15000
### obtained from Dirk Eddelbuettel: https://stackoverflow.com/questions/14720983/efficiently-generate-a-random-sample-of-times-and-dates-between-two-dates
generateDates <- function(N, st="2014/01/01", et="2015/08/31") {
st <- as.POSIXct(as.Date(st))
et <- as.POSIXct(as.Date(et))
dt <- as.numeric(difftime(et,st,unit="sec"))
ev <- sort(runif(N, 0, dt))
rt <- st + ev
rt[order(rt)]
as.Date(rt)
}
## generate data; 10 readings for each month out of 20 months
dateValues <- generateDates(200)
earnPts <- sample(x = earnPtsRange, size = 190)
earnCount <- sample(x = earnCountRange, size = 190)
redemPts <- sample(x = redemPtsRange, size = 190)
redemCount <- sample(x = redemCountRange, size = 190)
churnCount <- sample(x = churnRange, size = 190)
acquisCount <- sample(x = acquisitionRange, size = 190)
## merge the generated data
toyData <- data.frame(dateValues = dateValues, earnPts = earnPts, earnCount = earnCount, redemPts = redemPts, redemCount = redemCount, churnCount = churnCount,
acquisCount = acquisCount)
## write the data to a CSV file
write.csv(x = toyData, file = './toyDataset.csv', row.names = FALSE)
Many thanks in advance.
解决方案
I have just pushed what I think is a fix to your issue on my fork of rCharts. It solved my issues with responsiveness and auto-resizing with rCharts. The way you use it is by specifying a width and height parameter in showOutput. Default width is 100% and default height is 400px.
Example call would be showOutput("myGraph", "nvd3", height=555)
You can download from: https://github.com/clecocel/rCharts
And you can install it by using: devtools::install_github("clecocel/rCharts")
这篇关于在闪亮的应用程序中格式化/对齐 rCharts (nvd3)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
