Отображать сообщение, когда amCharts отображает график на экране - PullRequest
Новая
       9

Отображать сообщение, когда amCharts отображает график на экране

0 голосов
/ 26 апреля 2018

Мне интересно, как правильно отображать сообщение о состоянии, пока amCharts отображает график на экране . Я использую amCharts в своем приложении Shiny с пакетом rAmCharts, и мой сюжет состоит из огромного количества данных. На локальном сервере диаграмма отображается довольно быстро, однако при развертывании моего приложения на AWS на диаграмму рендеринга уходит значительное время. Поэтому я планирую показать какое-то сообщение, чтобы пользователь знал, что что-то происходит.

Ниже приведен код моего приложения: 

library(shiny)
library(rAmCharts) 
library(shinyjs)


 ui = fluidPage(
    inlineCSS(" #curtain {
                  background: rgba(0, 0, 0, 0.8);
                  color: #fff;
                  font-size: 25px;
                  position: absolute;
                  top: 1%;
                  width: 50%;
                  text-align: center;
                  z-index: 1000;
                }"),

    amChartsOutput("amPLot", height = "485px"),                                     
    useShinyjs(),
    div(id = "curtain")
)

server = function(input, output, session) {
     PDF = density(rnorm(1000000))
     Dat = data.frame(x = PDF$x, y = PDF$y)

     Plot = amXYChart(x = Dat$x, y = Dat$y) %>%
            setDataProvider(dataProvider = Dat, keepNA = TRUE) %>%
            addGraph(xField = "x", yField = "y", lineColor = "#058e54", fillAlphas = 0.5, bullet = "round", lineThickness = 1, bulletColor = "transparent")
    Plot@listeners = list(event = 'rendered', method = JS("function(e) {
                                                              document.getElementById('curtain').innerHTML='Displaying plot';
                                                            }"))

    output$amPLot = renderAmCharts(Plot)
    hide(id = "curtain", anim = TRUE, animType = "fade")   
}

shinyApp(ui = ui, server = server)

Однако, похоже, код работает не так, как задумано, так как я не смог увидеть ни одного сообщения, пока диаграмма выводилась на экран.

Буду признателен, если кто-нибудь проведет меня через правильный подход.

На основании обратной связи, полученной от jspcal, ниже приведен мой модифицированный код - однако все еще безуспешно 

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


 ui = fluidPage(
    inlineCSS(" #curtain {
                  background: rgba(0, 0, 0, 0.8);
                  color: #fff;
                  font-size: 25px;
                  position: absolute;
                  top: 1%;
                  width: 50%;
                  text-align: center;
                  z-index: 1000;
                }"),

    div(id="chart-container", 
        div(id="chart-div"),
        div(id="curtain", "Chart is loading...")),

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

)

server = function(input, output, session) {
     PDF = density(rnorm(1000000))
     Dat = data.frame(x = PDF$x, y = PDF$y)

     Plot = amXYChart(x = Dat$x, y = Dat$y) %>%
            setDataProvider(dataProvider = Dat, keepNA = TRUE) %>%
            addGraph(xField = "x", yField = "y", lineColor = "#058e54", fillAlphas = 0.5, bullet = "round", lineThickness = 1, bulletColor = "transparent")
    Plot@listeners = list(event = 'rendered', method = JS("function(e) {
                                                              document.getElementById('curtain').style.display = 'none';
                                                            }"))    

    output$amPLot = renderAmCharts(Plot)
}

shinyApp(ui = ui, server = server)

Как видите, хотя при инициализации диаграммы отображается div = curtain, она не гаснет после того, как диаграмма отображается полностью. Любая дальнейшая помощь высоко ценится.

1 Ответ

0 голосов
/ 26 апреля 2018

Визуализированное событие срабатывает, когда график полностью отображается. В исходном состоянии на странице может отображаться сообщение о загрузке. Когда вызывается обработчик события, сообщение может быть обновлено или скрыто в коде обработчика. Кажется, во фрагменте кода выше div скрывается сразу, вместо ожидания вызова обработчика события.

Из примера на https://www.amcharts.com/kbase/displaying-loading-indicator-chart-loaded/

<div id="chart-container">
    <div id="chart-div"></div>
    <div id="curtain">Chart is loading...</div>
</div>

Сообщение отображается в исходной разметке до того, как что-либо произойдет. В своем коде убедитесь, что на странице изначально есть это сообщение. Когда вызывается обработчик, сообщение div удаляется.

...