javascript - 在 R Shiny 中的垂直 noUiSliderInput 上将标签自定义为指数文本格式
问题描述
我noUiSliderInput
在我的应用程序中使用垂直
我想将标签替换pips
为noUiSliderInput
从常规数字定义的文本字符串10^x
,其中 x 是原始标签。
滑块具有以下属性(一些背景信息):
- 它是
uiOutput
在我的server
- 它是线性的,但在对数旁边
ggplot
。因此,如果我的实际数据范围为 0.1 (10^-1) 到 1000 (10^3),我将滑块值设置为实际上从 -1 到 3的“功率数” 。 - 这样线性滑块可以跟随对数图
- min 和 max 取决于用户从
selectInput
菜单打开的数据文件中的值范围,该菜单加载文件,计算滑块的新最小值和最大值,并使其重新呈现。
我知道它很可能应该用 javascript 来实现,但到目前为止,我的尝试甚至没有接近产生任何效果。
我在这里看到了一个用单词替换标签的常规滑块示例,但是将上标的 10 更改为 10 是另一回事,到目前为止,我无法使用示例定位 noUislider。所以问题
服务器文件
server <- function(input, output, session) {
values <- reactiveValues(
minimum = 1
)
observeEvent(input$Button1, {
values$minimum <- sample(1:5, 1)
})
observe({ values$maximum <- values$minimum + 5})
output$sliderout <- renderUI({
noUiSliderInput(
inputId = "YOUR_SLIDER_ID",
label = "Slider vertical:",
min = values$minimum,
max = values$maximum,
step = 0.1,
value = values$minimum,
orientation = "vertical",
pips = list(
mode = "range",
density = 10
),
width = "100px", height = "300px"
)})
output$res2 <- renderPrint(input$noui2)
}
界面文件
library(shiny)
library(shinyWidgets)
ui <- fluidPage(
# includeScript("slider.js"), ## line to open file with javascript
tags$br(),
div(class = 'myslider', uiOutput('sliderout')),
actionButton(inputId = 'Button1', label = 'Change slider'),
verbatimTextOutput(outputId = "res2")
)
解决方案
这是我设法实现的。只有一个问题:1000
被渲染为1000.000000000002
. 我不知道该怎么处理。
library(shiny)
library(shinyWidgets)
library(shinyjs)
js <- paste(
"var slider = document.getElementById('noui').noUiSlider;",
"slider.updateOptions({",
" format: wNumb({",
" encoder: function(x){return Math.pow(10,x);}",
" })",
"});",
"slider.pips({",
" mode: 'range',",
" density: 2,",
" format: {",
" to: function(x){return '10^' + x;}",
" }",
"});",
sep = "\n"
)
ui <- fluidPage(
useShinyjs(),
tags$br(),
noUiSliderInput(
inputId = "noui", label = "Slider vertical:",
min = -2, max = 4, step = 1,
value = 0, margin = 100,
orientation = "vertical",
width = "300px", height = "300px"
),
verbatimTextOutput(outputId = "res")
)
server <- function(input, output, session) {
output$res <- renderPrint(input$noui)
observeEvent(input$noui, {
runjs(js)
}, once = TRUE)
}
shinyApp(ui, server)
编辑
我还没有找到如何借助该format
选项获取 HTML 点值。这是一种获取10^x
上标的方法:
var pipsValues = $('.noUi-value');
pipsValues.each(function(){$(this).html('10<sup>'+$(this).attr('data-value')+'</sup>')});
也就是完整的JS代码是:
js <- paste(
"var slider = document.getElementById('noui').noUiSlider;",
"slider.updateOptions({",
" format: wNumb({",
" encoder: function(x){return parseFloat(Math.pow(10,x).toPrecision(2));}",
" })",
"});",
"slider.pips({",
" mode: 'range',",
" density: 2",
"});",
"var pipsValues = $('.noUi-value');",
"pipsValues.each(function(){$(this).html('10<sup>'+$(this).attr('data-value')+'</sup>')});",
sep = "\n"
)
编辑 2
这是一个处理当 和 是反应值的情况的min
应用程序max
。value
这个想法是避免renderUI
:应用程序以初始滑块开始,这三个值由 Javascript 在该方updateOptions
法的帮助下更新。
library(shiny)
library(shinyWidgets)
library(shinyjs)
js <- function(Min, Max, Start){
sprintf(paste(
"var slider = document.getElementById('noui').noUiSlider;",
"slider.updateOptions({",
" start: %s,",
" range: {min: %s, max: %s},",
" format: wNumb({",
" encoder: function(x){return parseFloat(Math.pow(10,x).toPrecision(2));}",
" })",
"});",
"var pipsValues = $('.noUi-value');",
"pipsValues.each(function(){$(this).html('10<sup>'+$(this).attr('data-value')+'</sup>')});",
sep = "\n"
), Start, Min, Max)
}
ui <- fluidPage(
useShinyjs(),
actionButton("btn", "Sample"),
tags$br(),
noUiSliderInput(
inputId = "noui", label = "Slider vertical:",
min = -2, max = 4, step = 1,
value = 0, margin = 100,
pips = list(mode="range", density=2),
orientation = "vertical",
width = "300px", height = "300px",
behaviour = "tap"
),
verbatimTextOutput(outputId = "res")
)
server <- function(input, output, session) {
Values <- eventReactive(input$btn, {
Min <- sample(-5:5, 1)
Max <- Min + 6
Start <- sample(Min:Max, 1)
list(min = Min, max = Max, start = Start)
}, ignoreNULL = FALSE)
observe({
if(!is.null(input$noui)){
values <- Values()
runjs(js(values$min,values$max,values$start))
}
})
output$res <- renderPrint(input$noui)
}
shinyApp(ui, server)
推荐阅读
- erpnext - 如何在 Frappe/ERP 中正确删除自定义文档类型
- magento2 - Magento 仪表板页眉和页脚
- python - 如何在 html 中使用 {% if user.is_authenticated %} 来显示或删除内容
- java - 为什么 ChronoUnit.HOURS.between() 不工作?
- javascript - 我可以在 Vscode 编辑器中使用 Live Server 吗?
- java - 如何在 Spring Boot 中测试分页结果?
- flutter - 对流有什么不好的用途?
- xcode - 为什么角色的脸在 Xcode 中会自动转换为绿色?
- javascript - 如何在 django 模板中设置默认值
- reactjs - 为什么两条路由在具有不同路径链接的反应js中调用同一页面