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

时间:2016-07-25 11:14:22

标签: javascript r shiny rcharts

我创建了一个简单的应用,其中包含selectInput小部件和rCharts中的条形图。我想要完成的是创建带有所有三本书的图例的情节,但默认情况下仅显示由小部件选择的书。因此,当我从Book1更改为Book2时,情节最初将仅显示有关Book2的信息,但图例图将包含Book1Book3(默认情况下均已停用) ) - 如果我想,我可以随时选择Book1Book3。我相信这是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中实现它。

1 个答案:

答案 0 :(得分: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元素是在图表之前创建的,因此它最初显示所有三本书,直到用户选择一个。