Question

我正在尝试使用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：

以下是代码作为可运行的代码段

＆＃13;

ok2017

＆＃13;

Answer 1

实际上，canvas正在添加到graphcon div中。在将canvas添加到DOM之前，您正在执行脚本。添加canvas后，将脚本代码放在changeDivContent（）`函数中。它有效。

＆＃13;

<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>

＆＃13;

按钮onChange无效

1 个答案: