通过 selectInput 操作图例 - rCharts 中的 multibarChart
manipulating legend by selectInput - multibarChart in rCharts
我创建了一个简单的应用程序,其中包括 selectInput
小部件和 rCharts
中的条形图。我想要完成的是用所有三本书的图例创建情节,但默认情况下只显示小部件选择的一本书。因此,当我从 Book1
更改为 Book2
时,该图最初将仅显示有关 Book2
的信息,但图例图将包括 Book1
和 Book3
(默认情况下均禁用) - 如果我愿意,我可以随时选择 Book1
或 Book3
。我相信这是 JS 问题所以我试图解决它但没有任何改变。任何想法如何处理它?谢谢。
library(shiny)
library(rCharts)
books <- c('Book1','Book2','Book3')
df <- data.frame(book = rep(books, each = 10),
year = rep(2000:2009,3),
sale = sample(100:1000, 30, replace = T))
ui <- shinyUI(
fluidPage(
HTML("
<script>
$( document ).ready(function() {
if ( $(\"select#book div.selectize-dropdown div[data-value='Book1']\").hasClass('selected')) {
console.log('true');
$('#nvd3Plot .nv-legend g.nv-series').eq(1).addClass('disabled');
$('#nvd3Plot .nv-legend g.nv-series').eq(2).addClass('disabled');
}
else {
console.log('false');
}
});
</script>"),
selectInput('book', 'Select a book', choices = books, selected = 'Book1'),
showOutput("nvd3Plot", "nvd3")
)
)
server <- function(input, output, session) {
output$nvd3Plot <- renderChart2({
chartObject <- nPlot(sale ~ year, group = "book", data = df, type = "multiBarChart")
chartObject$chart(
showControls = FALSE
)
return(chartObject)
})
}
shinyApp(ui, server)
更新
我找到了这个 但实际上我不知道如何在 R 中实现它。
使用 的答案,您可以使用自定义消息处理程序以编程方式单击图例。
您可以在 ui.R
中添加:
tags$script('
Shiny.addCustomMessageHandler("change_selected_book",
function(book) {
d3.select("g.nv-legendWrap").selectAll("g.nv-series.disabled")
.each(function(d) {
this.dispatchEvent(new Event("click"));
});
d3.select("g.nv-legendWrap").selectAll("g.nv-series").filter(
function(d) { return d.key != book; })
.each(function(d) {
this.dispatchEvent(new Event("click"));
});
});
')
在你的 server.R
:
observe({
session$sendCustomMessage(type = "change_selected_book", input$book)
})
代码点击了所有被禁用的系列,一旦所有系列都被启用,它会点击除了用户选择禁用它们的那本书之外的所有书籍的图例。
一个缺点是 selectInput
元素是在图表之前创建的,因此它最初会显示所有三本书,直到用户选择一本书。
我创建了一个简单的应用程序,其中包括 selectInput
小部件和 rCharts
中的条形图。我想要完成的是用所有三本书的图例创建情节,但默认情况下只显示小部件选择的一本书。因此,当我从 Book1
更改为 Book2
时,该图最初将仅显示有关 Book2
的信息,但图例图将包括 Book1
和 Book3
(默认情况下均禁用) - 如果我愿意,我可以随时选择 Book1
或 Book3
。我相信这是 JS 问题所以我试图解决它但没有任何改变。任何想法如何处理它?谢谢。
library(shiny)
library(rCharts)
books <- c('Book1','Book2','Book3')
df <- data.frame(book = rep(books, each = 10),
year = rep(2000:2009,3),
sale = sample(100:1000, 30, replace = T))
ui <- shinyUI(
fluidPage(
HTML("
<script>
$( document ).ready(function() {
if ( $(\"select#book div.selectize-dropdown div[data-value='Book1']\").hasClass('selected')) {
console.log('true');
$('#nvd3Plot .nv-legend g.nv-series').eq(1).addClass('disabled');
$('#nvd3Plot .nv-legend g.nv-series').eq(2).addClass('disabled');
}
else {
console.log('false');
}
});
</script>"),
selectInput('book', 'Select a book', choices = books, selected = 'Book1'),
showOutput("nvd3Plot", "nvd3")
)
)
server <- function(input, output, session) {
output$nvd3Plot <- renderChart2({
chartObject <- nPlot(sale ~ year, group = "book", data = df, type = "multiBarChart")
chartObject$chart(
showControls = FALSE
)
return(chartObject)
})
}
shinyApp(ui, server)
更新
我找到了这个
使用
您可以在 ui.R
中添加:
tags$script('
Shiny.addCustomMessageHandler("change_selected_book",
function(book) {
d3.select("g.nv-legendWrap").selectAll("g.nv-series.disabled")
.each(function(d) {
this.dispatchEvent(new Event("click"));
});
d3.select("g.nv-legendWrap").selectAll("g.nv-series").filter(
function(d) { return d.key != book; })
.each(function(d) {
this.dispatchEvent(new Event("click"));
});
});
')
在你的 server.R
:
observe({
session$sendCustomMessage(type = "change_selected_book", input$book)
})
代码点击了所有被禁用的系列,一旦所有系列都被启用,它会点击除了用户选择禁用它们的那本书之外的所有书籍的图例。
一个缺点是 selectInput
元素是在图表之前创建的,因此它最初会显示所有三本书,直到用户选择一本书。