主頁 > 企業開發 > 如何在selectizeInput加載所有選項之前添加微調器?[閃亮的]

如何在selectizeInput加載所有選項之前添加微調器?[閃亮的]

2022-01-08 05:16:51 企業開發

我想用 2 actionButtons制作一個應用程式:1)在加載之前提交更改 aselectizeInput和 2)繪制繪圖。

我知道如何spinner在單擊a添加 aactionButton但是大多數情況是在您想要顯示繪圖時添加的。但是,是否可以在spinner不顯示任何情節情況下添加 a 在這種特殊情況下,我想在單擊“提交”后顯示一個微調器,直到selectizeInput從“選擇選項卡”加載。您可以看到我附加的示例,加載所有選項需要一些時間(因為檔案有 25000 行)。

如何在 selectizeInput 加載所有選項之前添加微調器?[閃亮的]

如何在 selectizeInput 加載所有選項之前添加微調器?[閃亮的]

單擊第二個actionButton(顯示繪圖)后,我已經有了一個微調器,但我還需要一個。

我創建了一個示例,但由于某種原因,該圖未顯示在閃亮的應用程式中,它出現在 R 的視窗中(我不知道為什么,但我添加該圖只是為了向您展示我如何放置第二個微調器。我想要一個類似的,但第一個actionButton。)。

library(shiny)
library(shinycssloaders)


ui <- fluidPage(

      titlePanel("My app"),
      
      sidebarLayout(
        sidebarPanel(
          tabsetPanel(
            
            tabPanel("Submit",
                     checkboxInput("log2", "Log2 transformation", value = FALSE),
                     actionButton("submit", "Submit")
            ),
      
      
            tabPanel("Selection",
                     br(),
                     selectizeInput(inputId = "numbers", label = "Choose one number:", choices=character(0)),
                     actionButton("show_plot", "Show the plot")
            ))
    ),
    mainPanel(
      conditionalPanel(
        condition = "input.show_plot > 0",
        style = "display: none;",
        withSpinner( plotOutput("hist"),
                    type = 5, color = "#0dc5c1", size = 1))

    )
  )
)

server <- function(input, output, session) {
  
  data <- reactive({
    data = read.csv("https://people.sc.fsu.edu/~jburkardt/data/csv/hw_25000.csv")
    data[,1] <- as.character(data[,1])
    
    if(input$log2 == TRUE){
      cols <- sapply(data, is.numeric)
      data[cols] <- lapply(data[cols], function(x) log2(x 1))
    }

    return(data)
  })
  
  mylist <- reactive({
    req(data())
    data <- data()
    data <- data[,1]
    return(data)
  })
  
  # This is to generate the choices (gene list) depending on the user's input.
  observeEvent(input$submit, {
    updateSelectizeInput(
      session = session, 
      inputId = "numbers", 
      choices = mylist(), options=list(maxOptions = length(mylist()))
    )
  })
  
  v <- reactiveValues()
  observeEvent(input$show_plot, {
    data <- data()
    v$plot <- plot(x=data[,1], y=data[,2])
  })
  
  
  # If the user didn't choose to see the plot, it won't appear.
  output$hist <- renderPlot({
    req(data())
    if (is.null(v$plot)) return()
    
    if(input$show_plot > 0){
      v$plot
    }

  })
}

有誰知道如何幫助我,好嗎?

非常感謝

uj5u.com熱心網友回復:

這有點棘手。

首先,selectizeInput如警告所示,我將在服務器端更新

警告:選擇輸入“數字”包含大量選項;考慮使用服務器端選擇來大幅提高性能。請參閱 ?selectizeInput 幫助主題的詳細資訊部分。

此外,我切換到ggplot2關于plotOutput- 請參閱此相關帖子

要在selectizeInput更新選項時顯示微調器,我們需要知道更新需要多長時間。這些資訊可以通過Shiny 的 JS 事件收集- 另請參閱這篇文章

最后,我們可以為不存在的輸出顯示微調器,這樣我們就可以控制顯示微調器的時間(參見 參考資料uiOutput("dummyid")):

library(shiny)
library(shinycssloaders)
library(ggplot2)

ui <- fluidPage(
  titlePanel("My app"),
  tags$script(HTML(
    "
     $(document).on('shiny:inputchanged', function(event) {
       if (event.target.id === 'numbers') {
         Shiny.setInputValue('selectizeupdate', true, {priority: 'event'});
       }
     });
     $(document).on('shiny:updateinput', function(event) {
       if (event.target.id === 'numbers') {
         Shiny.setInputValue('selectizeupdate', false, {priority: 'event'});
       }
     });
    
    "
  )),
  sidebarLayout(
    sidebarPanel(
      tabsetPanel(
        tabPanel("Submit",
                 checkboxInput("log2", "Log2 transformation", value = FALSE),
                 actionButton("submit", "Submit")
        ),
        tabPanel("Selection",
                 br(),
                 selectizeInput(inputId = "numbers", label = "Choose one number:", choices=NULL),
                 actionButton("show_plot", "Show the plot")
        ))
    ),
    mainPanel(
      uiOutput("plotProxy")
    )
  )
)

server <- function(input, output, session) {
  
  previousEvent <- reactiveVal(FALSE)
  choicesReady <- reactiveVal(FALSE)
  submittingData <- reactiveVal(FALSE)
  
  observeEvent(input$selectizeupdate, {
    if(previousEvent() && input$selectizeupdate){
      choicesReady(TRUE)
      submittingData(FALSE)
    } else {
      choicesReady(FALSE)
    }
    previousEvent(input$selectizeupdate)
  })
  
  data <- reactive({
    data = read.csv("https://people.sc.fsu.edu/~jburkardt/data/csv/hw_25000.csv")
    
    if(input$log2 == TRUE){
      cols <- sapply(data, is.numeric)
      data[cols] <- lapply(data[cols], function(x) log2(x 1))
    }
    return(data)
  })
  
  mylist <- reactive({
    req(data()[,1])
  })
  
  observeEvent(input$submit, {
    submittingData(TRUE)
    reactivePlotObject(NULL) # reset
    updateSelectizeInput(
      session = session, 
      inputId = "numbers", 
      choices = mylist(), options=list(maxOptions = length(mylist())),
      server = TRUE
    )
  })
  
  reactivePlotObject <- reactiveVal(NULL)
  observeEvent(input$show_plot, {
    reactivePlotObject(ggplot(data(), aes_string(x = names(data())[1], y = names(data())[2]))   geom_point())
  })
  
  output$hist <- renderPlot({
    reactivePlotObject()
  })
  
  output$plotProxy <- renderUI({
    if(submittingData() && !choicesReady()){
      withSpinner(uiOutput("dummyid"), type = 5, color = "#0dc5c1", size = 1)
    } else {
      conditionalPanel(condition = "input.show_plot > 0", withSpinner(plotOutput("hist"), type = 5, color = "#0dc5c1", size = 1), style = "display: none;")
    }
  })
}

shinyApp(ui, server)

您的示例資料的前 100 行(dput(head(data, 100))-您的鏈接可能有一天會離線):

structure(list(Index = 1:100, Height.Inches. = c(65.78331, 71.51521, 
69.39874, 68.2166, 67.78781, 68.69784, 69.80204, 70.01472, 67.90265, 
66.78236, 66.48769, 67.62333, 68.30248, 67.11656, 68.27967, 71.0916, 
66.461, 68.64927, 71.23033, 67.13118, 67.83379, 68.87881, 63.48115, 
68.42187, 67.62804, 67.20864, 70.84235, 67.49434, 66.53401, 65.44098, 
69.5233, 65.8132, 67.8163, 70.59505, 71.80484, 69.20613, 66.80368, 
67.65893, 67.80701, 64.04535, 68.57463, 65.18357, 69.65814, 67.96731, 
65.98088, 68.67249, 66.88088, 67.69868, 69.82117, 69.08817, 69.91479, 
67.33182, 70.26939, 69.10344, 65.38356, 70.18447, 70.40617, 66.54376, 
66.36418, 67.537, 66.50418, 68.99958, 68.30355, 67.01255, 70.80592, 
68.21951, 69.05914, 67.73103, 67.21568, 67.36763, 65.27033, 70.84278, 
69.92442, 64.28508, 68.2452, 66.35708, 68.36275, 65.4769, 69.71947, 
67.72554, 68.63941, 66.78405, 70.05147, 66.27848, 69.20198, 69.13481, 
67.36436, 70.09297, 70.1766, 68.22556, 68.12932, 70.24256, 71.48752, 
69.20477, 70.06306, 70.55703, 66.28644, 63.42577, 66.76711, 68.88741
), Weight.Pounds. = c(112.9925, 136.4873, 153.0269, 142.3354, 
144.2971, 123.3024, 141.4947, 136.4623, 112.3723, 120.6672, 127.4516, 
114.143, 125.6107, 122.4618, 116.0866, 139.9975, 129.5023, 142.9733, 
137.9025, 124.0449, 141.2807, 143.5392, 97.90191, 129.5027, 141.8501, 
129.7244, 142.4235, 131.5502, 108.3324, 113.8922, 103.3016, 120.7536, 
125.7886, 136.2225, 140.1015, 128.7487, 141.7994, 121.2319, 131.3478, 
106.7115, 124.3598, 124.8591, 139.6711, 137.3696, 106.4499, 128.7639, 
145.6837, 116.819, 143.6215, 134.9325, 147.0219, 126.3285, 125.4839, 
115.7084, 123.4892, 147.8926, 155.8987, 128.0742, 119.3701, 133.8148, 
128.7325, 137.5453, 129.7604, 128.824, 135.3165, 109.6113, 142.4684, 
132.749, 103.5275, 124.7299, 129.3137, 134.0175, 140.3969, 102.8351, 
128.5214, 120.2991, 138.6036, 132.9574, 115.6233, 122.524, 134.6254, 
121.8986, 155.3767, 128.9418, 129.1013, 139.4733, 140.8901, 131.5916, 
121.1232, 131.5127, 136.5479, 141.4896, 140.6104, 112.1413, 133.457, 
131.8001, 120.0285, 123.0972, 128.1432, 115.4759)), row.names = c(NA, 
100L), class = "data.frame")

轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/404936.html

標籤:

上一篇:分配給在R中不起作用的回圈內容的索引

下一篇:將兩個excel檔案附加到一個資料框中

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C#(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • IEEE1588PTP在數字化變電站時鐘同步方面的應用

    IEEE1588ptp在數字化變電站時鐘同步方面的應用 京準電子科技官微——ahjzsz 一、電力系統時間同步基本概況 隨著對IEC 61850標準研究的不斷深入,國內外學者提出基于IEC61850通信標準體系建設數字化變電站的發展思路。數字化變電站與常規變電站的顯著區別在于程序層傳統的電流/電壓互 ......

    uj5u.com 2020-09-10 03:51:52 more
  • HTTP request smuggling CL.TE

    CL.TE 簡介 前端通過Content-Length處理請求,通過反向代理或者負載均衡將請求轉發到后端,后端Transfer-Encoding優先級較高,以TE處理請求造成安全問題。 檢測 發送如下資料包 POST / HTTP/1.1 Host: ac391f7e1e9af821806e890 ......

    uj5u.com 2020-09-10 03:52:11 more
  • 網路滲透資料大全單——漏洞庫篇

    網路滲透資料大全單——漏洞庫篇漏洞庫 NVD ——美國國家漏洞庫 →http://nvd.nist.gov/。 CERT ——美國國家應急回應中心 →https://www.us-cert.gov/ OSVDB ——開源漏洞庫 →http://osvdb.org Bugtraq ——賽門鐵克 →ht ......

    uj5u.com 2020-09-10 03:52:15 more
  • 京準講述NTP時鐘服務器應用及原理

    京準講述NTP時鐘服務器應用及原理京準講述NTP時鐘服務器應用及原理 安徽京準電子科技官微——ahjzsz 北斗授時原理 授時是指接識訓通過某種方式獲得本地時間與北斗標準時間的鐘差,然后調整本地時鐘使時差控制在一定的精度范圍內。 衛星導航系統通常由三部分組成:導航授時衛星、地面檢測校正維護系統和用戶 ......

    uj5u.com 2020-09-10 03:52:25 more
  • 利用北斗衛星系統設計NTP網路時間服務器

    利用北斗衛星系統設計NTP網路時間服務器 利用北斗衛星系統設計NTP網路時間服務器 安徽京準電子科技官微——ahjzsz 概述 NTP網路時間服務器是一款支持NTP和SNTP網路時間同步協議,高精度、大容量、高品質的高科技時鐘產品。 NTP網路時間服務器設備采用冗余架構設計,高精度時鐘直接來源于北斗 ......

    uj5u.com 2020-09-10 03:52:35 more
  • 詳細解讀電力系統各種對時方式

    詳細解讀電力系統各種對時方式 詳細解讀電力系統各種對時方式 安徽京準電子科技官微——ahjzsz,更多資料請添加VX 衛星同步時鐘是我京準公司開發研制的應用衛星授時時技術的標準時間顯示和發送的裝置,該裝置以M國全球定位系統(GLOBAL POSITIONING SYSTEM,縮寫為GPS)或者我國北 ......

    uj5u.com 2020-09-10 03:52:45 more
  • 如何保證外包團隊接入企業內網安全

    不管企業規模的大小,只要企業想省錢,那么企業的某些服務就一定會采用外包的形式,然而看似美好又經濟的策略,其實也有不好的一面。下面我通過安全的角度來聊聊使用外包團的安全隱患問題。 先看看什么服務會使用外包的,最常見的就是話務/客服這種需要大量重復性、無技術性的服務,或者是一些銷售外包、特殊的職能外包等 ......

    uj5u.com 2020-09-10 03:52:57 more
  • PHP漏洞之【整型數字型SQL注入】

    0x01 什么是SQL注入 SQL是一種注入攻擊,通過前端帶入后端資料庫進行惡意的SQL陳述句查詢。 0x02 SQL整型注入原理 SQL注入一般發生在動態網站URL地址里,當然也會發生在其它地發,如登錄框等等也會存在注入,只要是和資料庫打交道的地方都有可能存在。 如這里http://192.168. ......

    uj5u.com 2020-09-10 03:55:40 more
  • [GXYCTF2019]禁止套娃

    git泄露獲取原始碼 使用GET傳參,引數為exp 經過三層過濾執行 第一層過濾偽協議,第二層過濾帶引數的函式,第三層過濾一些函式 preg_replace('/[a-z,_]+\((?R)?\)/', NULL, $_GET['exp'] (?R)參考當前正則運算式,相當于匹配函式里的引數 因此傳遞 ......

    uj5u.com 2020-09-10 03:56:07 more
  • 等保2.0實施流程

    流程 結論 ......

    uj5u.com 2020-09-10 03:56:16 more
最新发布
  • 使用Django Rest framework搭建Blog

    在前面的Blog例子中我們使用的是GraphQL, 雖然GraphQL的使用處于上升趨勢,但是Rest API還是使用的更廣泛一些. 所以還是決定回到傳統的rest api framework上來, Django rest framework的官網上給了一個很好用的QuickStart, 我參考Qu ......

    uj5u.com 2023-04-20 08:17:54 more
  • 記錄-new Date() 我忍你很久了!

    這里給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 大家平時在開發的時候有沒被new Date()折磨過?就是它的諸多怪異的設定讓你每每用的時候,都可能不小心踩坑。造成程式意外出錯,卻一下子找不到問題出處,那叫一個煩透了…… 下面,我就列舉它的“四宗罪”及應用思考 可惡的四宗罪 1. Sa ......

    uj5u.com 2023-04-20 08:17:47 more
  • 使用Vue.js實作文字跑馬燈效果

    實作文字跑馬燈效果,首先用到 substring()截取 和 setInterval計時器 clearInterval()清除計時器 效果如下: 實作代碼如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ......

    uj5u.com 2023-04-20 08:12:31 more
  • JavaScript 運算子

    JavaScript 運算子/運算子 在 JavaScript 中,有一些運算子可以使代碼更簡潔、易讀和高效。以下是一些常見的運算子: 1、可選鏈運算子(optional chaining operator) ?.是可選鏈運算子(optional chaining operator)。?. 可選鏈操 ......

    uj5u.com 2023-04-20 08:02:25 more
  • CSS—相對單位rem

    一、概述 rem是一個相對長度單位,它的單位長度取決于根標簽html的字體尺寸。rem即root em的意思,中文翻譯為根em。瀏覽器的文本尺寸一般默認為16px,即默認情況下: 1rem = 16px rem布局原理:根據CSS媒體查詢功能,更改根標簽的字體尺寸,實作rem單位隨螢屏尺寸的變化,如 ......

    uj5u.com 2023-04-20 08:02:21 more
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 08:01:50 more
  • 如何在 vue3 中使用 jsx/tsx?

    我們都知道,通常情況下我們使用 vue 大多都是用的 SFC(Signle File Component)單檔案組件模式,即一個組件就是一個檔案,但其實 Vue 也是支持使用 JSX 來撰寫組件的。這里不討論 SFC 和 JSX 的好壞,這個仁者見仁智者見智。本篇文章旨在帶領大家快速了解和使用 Vu ......

    uj5u.com 2023-04-20 08:01:37 more
  • 【Vue2.x原始碼系列06】計算屬性computed原理

    本章目標:計算屬性是如何實作的?計算屬性快取原理以及洋蔥模型的應用?在初始化Vue實體時,我們會給每個計算屬性都創建一個對應watcher,我們稱之為計算屬性watcher ......

    uj5u.com 2023-04-20 08:01:31 more
  • http1.1與http2.0

    一、http是什么 通俗來講,http就是計算機通過網路進行通信的規則,是一個基于請求與回應,無狀態的,應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行,否則無法連接。tcp(三次握手,四次揮手)。 請求與回應:客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:01:10 more
  • http1.1與http2.0

    一、http是什么 通俗來講,http就是計算機通過網路進行通信的規則,是一個基于請求與回應,無狀態的,應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行,否則無法連接。tcp(三次握手,四次揮手)。 請求與回應:客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:00:32 more