在闪亮中加入html标签答案

【问题标题】：Incorporating html tags in shiny在闪亮中加入html标签
【发布时间】：2021-09-10 23:44:14
【问题描述】：

我正在尝试将 html 标签粘贴到闪亮的仪表板中，但看起来它没有呈现。但是在 w3schools 中尝试使用相同的 html 标签时，它运行良好。但它并没有呈现闪亮。基本上我需要在闪亮的仪表板中有一个点图

library(shiny)

ui <- fluidPage(
  htmlOutput("graph1")
)

server <- function(input, output, session) {
  output$graph1 <- renderUI({
    HTML('<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:700px"></canvas>

<script>
var xyValues = [
  {x:50, y:7},
  {x:60, y:8},
  {x:70, y:8},
  {x:80, y:9},
  {x:90, y:9},
  {x:100, y:9},
  {x:110, y:10},
  {x:120, y:11},
  {x:130, y:14},
  {x:140, y:14},
  {x:150, y:15}
];

new Chart("myChart", {
  type: "scatter",
  data: {
    datasets: [{
      pointRadius: 4,
      pointBackgroundColor: "rgb(0,0,255)",
      data: xyValues
    }]
  },
  options: {
    legend: {display: false},
    scales: {
      xAxes: [{ticks: {min: 40, max:160}}],
      yAxes: [{ticks: {min: 6, max:16}}],
    }
  }
});
</script>

</body>
</html>')
  })
}

shinyApp(ui, server)

【问题讨论】：

标签： html r shiny

【解决方案1】：

您的renderFunction 没有任何依赖项。此外，shiny 已经定义了一些标签（最值得注意的是<html> 和<body>）。虽然这不是一个破坏者（代码无论如何都会被渲染，并且<html> / <body> taga 被剥离）你应该为了清楚起见将它们删除。

话虽如此，包括任何类型的反应性都可以解决问题：

library(shiny)

ui <- fluidPage(
   actionButton("do", "Do!"),
   htmlOutput("graph1")
)

server <- function(input, output, session) {
   output$graph1 <- renderUI({
      input$do
      HTML('
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<canvas id="myChart" style="width:100%;max-width:700px"></canvas>

<script>
var xyValues = [
  {x:50, y:7},
  {x:60, y:8},
  {x:70, y:8},
  {x:80, y:9},
  {x:90, y:9},
  {x:100, y:9},
  {x:110, y:10},
  {x:120, y:11},
  {x:130, y:14},
  {x:140, y:14},
  {x:150, y:15}
];

new Chart("myChart", {
  type: "scatter",
  data: {
    datasets: [{
      pointRadius: 4,
      pointBackgroundColor: "rgb(0,0,255)",
      data: xyValues
    }]
  },
  options: {
    legend: {display: false},
    scales: {
      xAxes: [{ticks: {min: 40, max:160}}],
      yAxes: [{ticks: {min: 6, max:16}}],
    }
  }
});
</script>
')
   })
}

shinyApp(ui, server)

但是，我真的不明白你想做什么，因为你的代码目前是静态的，而闪亮的整个想法是以某种方式反应。也就是说，在这个玩具示例中，我将完全删除 render 部分并将 static 代码放入 UI 。

【讨论】：

非常感谢。但是我仍然不明白我是如何将这个代码呈现的动作按钮？我正在尝试将其合并到我的 Dt 表中。该图将是动态的，并根据用户过滤器进行更改

【解决方案2】：

这就是我在这里想要做的。我正在根据选择的过滤器在 dt 表本身内绘制图表

library(shiny)
library(DT)
library(glue)
library(dplyr)

ui <- fluidPage(
  selectInput("do", "select", choices = c(3,4,5,6)),
  selectInput("do1", "select1", choices = c(50,100)),
  dataTableOutput("graph1")
)

server <- function(input, output, session) {
   
  # a1 <- 3
  
 
  
    output$graph1 <- renderDataTable({
      df_1 <- data.frame(a = c(50, 100))
      
      df1 <-  df_1 %>% filter(a %in% input$do1) %>% mutate(b =  c(glue::glue(HTML('
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<canvas id="myChart{a}" style="width:100%;max-width:700px"></canvas>

<script>
var xyValues = [
  {{x:{a}, y:{input$do}}},
  {{x:60, y:8}},
  {{x:70, y:8}},
  {{x:80, y:9}},
  {{x:90, y:9}},
  {{x:100, y:9}}
];

new Chart("myChart{a}", {{
  type: "scatter",
  data: {{
    datasets: [{{
      pointRadius: 4,
      pointBackgroundColor: "rgb(0,0,255)",
      data: xyValues
    }}]
  }},
  options: {{
    legend: {{display: false}},
    scales: {{
      xAxes: [{{ticks: {{min: 40, max:100}}}}],
      yAxes: [{{ticks: {{min: 1, max:16}}}}],
    }}
  }}
}});
</script>
'))))
      
      datatable(df1, escape = F,rownames = F,options = list(autowidth = FALSE))
    
  })
}

shinyApp(ui, server)

【讨论】：