通过 selectInput 操作图例 - rCharts 中的 multibarChart

Question

我创建了一个简单的应用程序，其中包括 selectInput 小部件和 rCharts 中的条形图。我想要完成的是用所有三本书的图例创建情节，但默认情况下只显示小部件选择的一本书。因此，当我从Book1 更改为Book2 时，该图最初将仅显示有关Book2 的信息，但图例将包括Book1 和Book3（默认情况下均禁用）-如果我愿意，我可以选择@ 987654330@ 或 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)

更新

我找到了这个solution，但实际上我不知道如何在 R 中实现它。

Answer 1

使用来自here 的答案，您可以使用自定义消息处理程序以编程方式单击图例。

您可以在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 元素是在图表之前创建的，因此它最初会显示所有三本书，直到用户选择一本书。