我正在尝试使用javascript更改内容。通过按钮中的onClick事件调用更改。
当我点击按钮---
title: "My First Shiny"
runtime: shiny
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: scroll
---
```{r setup, include=FALSE}
library(flexdashboard)
library(tidyverse)
library(d3heatmap)
library(ggplot2)
```
Column
-----------------------------------------------------------------------
### Plot1
Here is the attempt
```{r}
checkboxInput("cluster", "Apply clustering")
renderD3heatmap(
d3heatmap(mtcars,
dendrogram = if (input$cluster) "both" else "none",
scale="none",
xaxis_height = 170,
yaxis_width = 170,
height=200,
cexRow = 1.0,
cexCol = 1.0,
k_row = 6,
k_col = 6
))
```
### Data
```{r}
renderPrint({tibble::as_tibble(mtcars)})
```
***
Some commentary about Frame 2.
Column
-----------------------------------------------------------------------
### Plot2
时，没有任何事情发生。
有人知道出了什么问题吗？
修改1：
以下是代码作为可运行的代码段
ok2017
答案 0 :(得分：0)
实际上，canvas正在添加到graphcon div中。在将canvas添加到DOM之前，您正在执行脚本。添加canvas后，将脚本代码放在changeDivContent（）`函数中。它有效。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script>
</script>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="ok2017" id="ok2017" onClick="changeDivContent()"> 2017
</label>
</div>
<div id="graphcon" class="graphcon"></div>
<script type="text/javascript">
function changeDivContent() {
document.getElementById('graphcon').innerHTML = 'sdfsdfsdfsdf';
document.getElementById('graphcon').innerHTML = '<canvas id="myChart">asd</canvas>';
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
datasets: [{
label: "Label 1",
data: [500, 400, 200, 300, 1000, 3000, 3000, 2000, 2000, 2000, 3000, 4000],
backgroundColor: ['rgba(2, 255, 109, 0.5)'],
borderColor: ['rgba(2,255,109,1)'],
borderWidth: 1
}, {
label: "Label 2",
data: [500, 400, 200, 300, 1000, 3000, 3000, 2000, 2000, 2000, 3000, 4000],
backgroundColor: ['rgba(255, 99, 132, 0.5)'],
borderColor: ['rgba(255,99,132,1)'],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
}
</script>