Question

中最早的帖子的延续

虽然我现在可以在纯HTML页面中使用滑块绘制amCharts，但我无法在闪亮的应用程序中实现相同的功能。下面是我的Shiny应用代码。

如果有人可以帮助我解开芯片，在Shiny应用中实现相同的正确方法，我将不胜感激。

用户界面：

library(shiny)
library(rAmCharts) 
require(purrr)
library(htmlwidgets)
library(shinyjs)


 ui = fluidPage(
    inlineCSS(" #slider {
                  margin-top: 20px;
                } "),
    inlineCSS(" .ui-slider .ui-slider-handle {
                  width: 3.2em!important;
                  text-align: center;
                  margin-left: -1.6em!important;
                } "),
    tags$head(
        tags$link(rel = "stylesheet", type = "text/css", href = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"),
        tags$script(src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"),
        tags$script(src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js")
      ),

    div(id="slider"),

    amChartsOutput("amPLot", height = "485px")                              

)

服务器：

server = function(input, output, session) {
     markers = list(list('year' = '2003',
                     'images' = data.frame(x = 0:2, y = c(9, 11, 4))),
                    list('year' = '2005',
                     'images' = data.frame(x = 1:3, y = c(19, 111, 14)))
            )

     Plot = amXYChart() %>%
            setDataProvider(dataProvider = markers[[1]]$images, keepNA = TRUE) %>%
            addGraph(xField = "x", yField = "y", lineColor = "#058e54", fillAlphas = 0.5, bullet = "round", lineThickness = 1, bulletColor = "transparent")
    Plot@listeners = list(event = 'init', method = JS("function(e) {
                                                      var markers = [{
                                                                      'year': 2003,
                                                                      'images': [{'x': 0, 'y': 9},
                                                                                 {'x': 1, 'y': 11},
                                                                                 {'x': 2, 'y': 4}]
                                                                    }, {
                                                                      'year': 2003,
                                                                      'images': [{'x': 1, 'y': 19},
                                                                                 {'x': 2, 'y': 111},
                                                                                 {'x': 3, 'y': 14}]
                                                                    }];
                                                      $( '#slider' ).slider({
                                                        'min': 0,
                                                        'max': 1,
                                                        'create': function( event, ui ) {
                                                          var dataSet = markers[0];
                                                          $('#slider .ui-slider-handle').text(dataSet.year);
                                                        },
                                                        'slide': function( event, ui ) {
                                                          var dataSet = markers[ui.value];
                                                          e.chart.dataProvider.images = dataSet.images;
                                                          $(ui.handle).text(dataSet.year);
                                                        }
                                                      });
                                                    }"))    

    output$amPLot = renderAmCharts(Plot)
}

APP ：

shinyApp(ui = ui, server = server)

带有AmChart的jquery滑块-R实现（rAmCharts）

0 个答案: