แสดงผลลัพธ์ต่าง ๆ บนแท็บที่แยกกัน
แท็บมีประโยชน์มากเมื่อมีเนื้อหาจำนวนมากและต้องการแบ่งออกเป็นส่วน ๆ การสร้างแท็บทำได้โดยการครอบ UI elements ไว้ในฟังก์ชัน tabPanel() และกำหนดชื่อแท็บโดยใช้อาร์กิวเมนต์ title
เพื่อให้แท็บปรากฏใน UI แท็บแพนเนลทั้งหมดจะต้องถูกจัดกลุ่มไว้ใน "container" ของ tabset โดยการครอบแท็บแพนเนลทั้งหมดไว้ในฟังก์ชัน tabsetPanel()
โจทย์ของคุณคือเพิ่มแท็บลงใน Shiny app โดยให้ inputs และปุ่มดาวน์โหลดอยู่ในแท็บหนึ่ง กราฟอยู่ในอีกแท็บหนึ่ง และตารางอยู่ในแท็บที่สาม เนื่องจากนี่เป็นการเปลี่ยนแปลงเชิงภาพเท่านั้น การแก้ไขโค้ดทั้งหมดจึงทำในส่วน UI เท่านั้น
แบบฝึกหัดนี้เป็นส่วนหนึ่งของหลักสูตร
กรณีศึกษา: การสร้างเว็บแอปพลิเคชันด้วย Shiny ใน R
คำแนะนำการฝึกหัด
- ใช้ฟังก์ชัน
tabsetPanel()เพื่อสร้าง container สำหรับแท็บแพนเนลสามแท็บ:- แท็บแรกสำหรับ inputs และตั้งชื่อแท็บว่า "Inputs"
- แท็บที่สองสำหรับแสดงกราฟ และตั้งชื่อแท็บว่า "Plot" (บรรทัดที่ 16)
- แท็บที่สามสำหรับแสดงตาราง และตั้งชื่อแท็บว่า "Table" (บรรทัดที่ 21)
แบบฝึกหัดเชิงโต้ตอบแบบลงมือทำ
ลองทำแบบฝึกหัดนี้โดยเติมโค้ดตัวอย่างนี้ให้สมบูรณ์
ui <- fluidPage(
h1("Gapminder"),
# Create a container for tab panels
___(
# Create an "Inputs" tab
tabPanel(
title = ___,
sliderInput(inputId = "life", label = "Life expectancy",
min = 0, max = 120,
value = c(30, 50)),
selectInput("continent", "Continent",
choices = c("All", levels(gapminder$continent))),
downloadButton("download_data")
),
# Create a "Plot" tab
___(
title = "Plot",
plotOutput("plot")
),
# Create "Table" tab
___(
title = ___,
DT::dataTableOutput("table")
)
)
)
server <- function(input, output) {
filtered_data <- reactive({
data <- gapminder
data <- subset(
data,
lifeExp >= input$life[1] & lifeExp <= input$life[2]
)
if (input$continent != "All") {
data <- subset(
data,
continent == input$continent
)
}
data
})
output$table <- DT::renderDataTable({
data <- filtered_data()
data
})
output$download_data <- downloadHandler(
filename = "gapminder_data.csv",
content = function(file) {
data <- filtered_data()
write.csv(data, file, row.names = FALSE)
}
)
output$plot <- renderPlot({
data <- filtered_data()
ggplot(data, aes(gdpPercap, lifeExp)) +
geom_point() +
scale_x_log10()
})
}
shinyApp(ui, server)