iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 22
2
Data Technology

你都在公司都在幹啥R? R語言資料分析經驗分享系列 第 22

【22】當老闆疑惑地問:所以我可以在這個網頁調整參數,那有哪些參數可以調?

在講各個可操控元件之前,先來講講shiny的佈局方式,不知道有多少讀者寫過前端網頁,前端不是我的main,但之前有稍微玩過bootstrap 的grid layout,在shiny 這邊就是採用了grid layout 的概念,將畫面的寬度分成12等分,你可以給予每個layout 權重值去分配畫面空間。

舉個例子,如果我想放置三欄等寬的layout 在畫面中,那我們就只要把每個layout 指定權重為4 即可。

fluidRow(
        column(4,
               div(style = "background-color: GreenYellow;",
                   h4("黃綠區塊")
                )
        ),
        column(4,
               div(style = "background-color: Coral;",
                   h4("橘色區塊")
               )
        ),
        column(4,
               div(style = "background-color: LightBlue;",
                   h4("淡藍區塊")
               )
        )
    )

如圖:

https://ithelp.ithome.com.tw/upload/images/20180108/20107299XG42rfHZwp.png

所以囉,如果要變成最左邊的佔寬度½ ,剩下的部分評分就會是

fluidRow(
        column(6,
               div(style = "background-color: GreenYellow;",
                   h4("黃綠區塊")
                )
        ),
        column(3,
               div(style = "background-color: Coral;",
                   h4("橘色區塊")
               )
        ),
        column(3,
               div(style = "background-color: LightBlue;",
                   h4("淡藍區塊")
               )
        )
    )

https://ithelp.ithome.com.tw/upload/images/20180108/20107299W06N1VHXfZ.png

當然,你也可以給其他值做出不同的效果,但我們這邊是資料分析,如果想要其他炫砲的配置可能還是要乖乖學網頁前端啦。

再來介紹幾個常用的元件,所有的說明在 這邊

  1. sliderInput

這個在前幾天應該已經看過了,是一個可以左右拉動的bar

sliderInput('sampleSize', 'Sample Size',
                               min=10, max=1000, value=500,
                               step=10, round=0)

min和max 分別是bar的最小和最大值, value是預設值,step是刻度,round是上面的值是否要四捨五入。

https://ithelp.ithome.com.tw/upload/images/20180108/20107299t2nbfuMT2K.png

  1. checkboxInput

這是一個簡單的核取方塊,你可以從此處得到布林值true/false 。

checkboxInput('check1', '勾選按鈕1')

https://ithelp.ithome.com.tw/upload/images/20180108/20107299WNaFULdYLh.png

第一個變數就是該變數名稱,之後你可以從input$check1 得到該值,第二個參數是顯示的文字。

  1. selectInput

呈現方式為下拉式選單。

selectInput('select1', '選擇1', c("A", "B", "C"))

第一個變數為input變數名稱,第二個變數是顯示的文字,第三個變數是可選擇的參數。

https://ithelp.ithome.com.tw/upload/images/20180108/20107299bn3VFeWD0h.png

4.numericInput
這是一個附帶+/- 的數字欄位,也是常用的一個元件。

numericInput("num", h3("數字選擇"), value = 1)

https://ithelp.ithome.com.tw/upload/images/20180108/20107299u84MRlVwK4.png

5.actionButton
就是一個按鈕,有關它的用途之後會再詳細介紹。

actionButton("button", "按鈕")

https://ithelp.ithome.com.tw/upload/images/20180108/20107299pYYOXeewDo.png

  1. dateInput
    日期選擇器,點擊後會打開瀏覽器內建的日期選擇。
dateInput("date", h3("Date input")

https://ithelp.ithome.com.tw/upload/images/20180108/20107299QFpRMRPB6Z.png

7.textInput

文字輸入區塊。

textInput("text", h3("Text input"), value = "Enter text...")

https://ithelp.ithome.com.tw/upload/images/20180108/20107299ZxpcgxNpYI.png

以上是常見的幾種元件介紹,

ref
day22原始碼


上一篇
【21】當老闆眼睛blink blink地問:哦?這看起來很方便,那我們公司的資料怎麼在shiny 上呈現?
下一篇
【23】當老闆興奮地說:那太好了,就先來一個可以互動的表格當作示範吧!
系列文
你都在公司都在幹啥R? R語言資料分析經驗分享30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言