Добавить интерактивный график в блестящий с HTML UI (index.html)

Я вижу, как ggvis, rCharts и т. Д. Вписываются в конструкцию server.r + ui.r. Теперь я пытаюсь создать HTML-интерфейс, но я не могу найти никаких подсказок о передаче интерактивной диаграммы в пользовательский интерфейс HTML. Любые подсказки?Добавить интерактивный график в блестящий с HTML UI (index.html)

Исследовано ggvis, rCharts, NBD3. Не исследовано для сюжета. Избегайте googleVis.

Аналогичный вопрос был задан ранее, в Evan Farrell, но без ответа - https://groups.google.com/forum/#!topic/ggvis/GsZQRl3VOZ4

Edit: Есть ли у них нужны пользовательские привязки? Любые более простые альтернативы? Я думал, что выход будет обработан Javascript SVG, так ли возможно, чтобы библиотеки были включены вручную, а SVG просто привязан к элементу div?

Edit 2: Могу ли я передать свой набор данных в UI-то и построить говорят диаграмма D3 в index.html себе

источник

2015-02-15 TheComeOnMan

Есть много примеров можно найти с помощью простого поиска Google. Для начала перейдите к концу этой страницы: «http://ggvis.rstudio.com/interactivity.html» с базовым примером ggvis/gliny. – hvollmeier

Спасибо @hvollmeier, я борюсь с преобразованием части ui.r в нечто, что работает с HTML-интерфейсом. У вас есть какие-то указания на это? – TheComeOnMan

У вас не должно быть файла ui.r вообще, если вы работаете с html-ui. В основном вы помещаете файл index.html, который заменяет файл «ui.r» в каталог «www» (который является подкаталогом в каталоге вашего проекта). Посмотрите на эту ссылку http://shiny.rstudio.com/articles/html-ui.html – hvollmeier

Вы можете найти here такие примеры, какие блестящие с ggvis:

library(shiny) 
library(ggvis) 

runApp(list(

    ui={ 
    library(ggvis) 
    shinyUI(pageWithSidebar(
     div(), 
     sidebarPanel(
     sliderInput("n", "Number of points", min = 1, max = nrow(mtcars), 
        value = 10, step = 1), 
     uiOutput("plot_ui") 
    ), 
     mainPanel(
     htmlOutput("ggvis_plot"), 
     tableOutput("mtc_table") 
    ) 
    )) 

    }, 

    server={ 
    library(ggvis) 
    shinyServer(function(input, output, session) { 

     output$ggvis_plot <- renderUI({ 
     ggvisOutput("plot1") 
     }) 
     # A reactive subset of mtcars 
     mtc <- reactive({ mtcars[1:input$n, ] }) 
     # A simple visualisation. In shiny apps, need to register observers 
     # and tell shiny where to put the controls 
     mtc %>% 
     ggvis(~wt, ~mpg) %>% 
     layer_points() %>% 
     bind_shiny("plot1") 
     output$mtc_table <- renderTable({ 
     mtc()[, c("wt", "mpg")] 
     }) 
    }) 
    } 
))

чтобы преобразовать его в HTML-интерфейс, блестящий проект, который вы должны создать каталог со следующей структурой (как описано here, как указано на hvollmeier):

<shinnyappName> 
|-- www 
    |-- index.html 
|-- server.R

Серверная часть останется прежней. Для нашего примера index.html часть будет что-то вроде:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <script type="application/shiny-singletons"></script> 
    <script type="application/html-dependencies">json2[2014.02.04];jquery[1.11.0];shiny[0.11.1];ionrangeslider[2.0.2];bootstrap[3.3.1]</script> 
<script src="shared/json2-min.js"></script> 
<script src="shared/jquery.min.js"></script> 
<link href="shared/shiny.css" rel="stylesheet" /> 
<script src="shared/shiny.min.js"></script> 
<link href="shared/ionrangeslider/css/normalize.css" rel="stylesheet" /> 
<link href="shared/ionrangeslider/css/ion.rangeSlider.css" rel="stylesheet" /> 
<link href="shared/ionrangeslider/css/ion.rangeSlider.skinShiny.css" rel="stylesheet" /> 
<script src="shared/ionrangeslider/js/ion.rangeSlider.min.js"></script> 
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
<link href="shared/bootstrap/css/bootstrap.min.css" rel="stylesheet" /> 
<script src="shared/bootstrap/js/bootstrap.min.js"></script> 
<script src="shared/bootstrap/shim/html5shiv.min.js"></script> 
<script src="shared/bootstrap/shim/respond.min.js"></script> 

</head> 
<body> 
    <div class="container-fluid"> 
    <div class="row"> 
     <div></div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-4"> 
     <form class="well"> 
      <div class="form-group shiny-input-container"> 
      <label class="control-label" for="n">Number of points</label> 
      <input class="js-range-slider" id="n" data-min="1" data-max="32" data-from="10" data-step="1" data-grid="true" data-grid-num="7.75" data-grid-snap="false" data-prettify-separator="," data-keyboard="true" data-keyboard-step="3.2258064516129"/> 
      </div> 
      <div id="plot_ui" class="shiny-html-output"></div> 
     </form> 
     </div> 
     <div class="col-sm-8"> 
     <div id="ggvis_plot" class="shiny-html-output"></div> 
     <div id="mtc_table" class="shiny-html-output"></div> 
     </div> 
    </div> 
    </div> 
</body> 
</html>

Что вы должны написать или вы могли бы получить, если вы сохраните страницу HTML, порожденную shinyUI как index.html и модифицировать его для своих нужд, а также как удалить все лишнее и нежелательное.

library(shiny) 
runApp("<shinyAppName>")

источник

2015-02-15 17:06:46 Stanislav

Спасибо @Stanislav.Я могу видеть таблицу правильно, но нет диаграммы рассеяния. Закладок div 'plot-gear-icon' заполняется, но div' plot' пуст. Вы видите тот же результат при запуске? – TheComeOnMan

Да, однако, когда я попробовал это на другом компьютере, мне пришлось сначала запустить весь пример с ui.R, вероятно, чтобы сгенерировать все входящие. – Stanislav

К включению, вы имеете в виду сценарии и CSS, являющиеся источниками (я новичок в этом :))? Запуск ui before не является для меня вариантом, поскольку я должен поделиться этим приложением с другими. – TheComeOnMan

Вы можете использовать Shiny, ggplot2 и Plotly для создания интерактивных веб-графиков. Графики отображаются с помощью D3.js и могут быть embedded in HTML.

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

Код и пояснения для создания интерактивных графов с помощью Shiny, см. this tutorial. Такой подход позволяет создавать интерактивные графики, как это:

enter image description here

источник

2015-06-10 03:49:12

Добавить интерактивный график в блестящий с HTML UI (index.html)

ответ

Смежные вопросы