Question

我的下面的代码旨在让用户有2个盒子，他们需要插入不同的图形。如果用户想要在第一个框中设置图形，则应按第一个框中的按钮，如果他想在第二个框中设置图形，则应按第二个框中的按钮。

目前我的代码会将所有图形放在第一个框中，是否有我可以实现的代码，以便它知道图形应放在哪个框中以响应框内按下的按钮。

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;

  table {
border-collapse: collapse;
border: 2px black solid;
font: 12px sans-serif;
}

td {
border: 1px black solid;
padding: 5px;
}
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 20%;
	float: middle;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

</style>
</head>
<body>
</body>
  <table style="width:65%;height:850px">
    <tr><td align="center" id="blockOne">
    <p><button onclick="addGraph()">Create Graph/Chart</button></p>
    <tr><td align="center" id="blockTwo">
    <p><button onclick="addGraph()">Create Graph/Chart</button></p>
  </table>

  <div id="addGraphModal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <table style="width:100%"; id="graphTable">
      <p><button onclick="generateBar()">Bar Chart</button></p>
      <p><button onclick="generateLine()">Line Chart</button></p>
      </table>
    </div>
  </div>

</body>
<script>
<!-- On button press, the Modal is created  -->
var modalGraph = document.getElementById('addGraphModal');
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
function addGraph() {
	modalGraph.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
	modalGraph.style.display = "none";

$("#graphTable").empty();
}

  function generateBar() {

  	$("#blockOne").empty();
		$('#blockOne').append('<div id="chartContainer" style="height: 100%; width: 100%;"></div>');

        var chart = new CanvasJS.Chart("chartContainer", {
        	animationEnabled: true,
        	theme: "light2", // "light1", "light2", "dark1", "dark2"
        	title:{
        		text: "Top Oil Reserves"
        	},
        	axisY: {
        		title: "Reserves(MMbbl)"
        	},
        	data: [{
        		type: "column",
        		showInLegend: true,
        		legendMarkerColor: "grey",
        		legendText: "MMbbl = one million barrels",
        		dataPoints: [
        			{ y: 300878, label: "Venezuela" },
        			{ y: 266455,  label: "Saudi" },
        			{ y: 169709,  label: "Canada" },
        			{ y: 158400,  label: "Iran" },
        			{ y: 142503,  label: "Iraq" },
        			{ y: 101500, label: "Kuwait" },
        			{ y: 97800,  label: "UAE" },
        			{ y: 80000,  label: "Russia" }
        		]
        	}]
        });
        chart.render();
}
  function generateLine() {
      var chart = new CanvasJS.Chart("chartContainer", {
      	animationEnabled: true,
      	theme: "light2", // "light1", "light2", "dark1", "dark2"
      	title:{
      		text: "Top Oil Reserves"
      	},
      	axisY: {
      		title: "Reserves(MMbbl)"
      	},
      	data: [{
      		type: "line",
      		showInLegend: true,
      		legendMarkerColor: "grey",
      		legendText: "MMbbl = one million barrels",
      		dataPoints: [
      			{ y: 300878, label: "Venezuela" },
      			{ y: 266455,  label: "Saudi" },
      			{ y: 169709,  label: "Canada" },
      			{ y: 158400,  label: "Iran" },
      			{ y: 142503,  label: "Iraq" },
      			{ y: 101500, label: "Kuwait" },
      			{ y: 97800,  label: "UAE" },
      			{ y: 80000,  label: "Russia" }
      		]
      	}]
      });
      chart.render();
    }
</script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</html>

Javascript将图表放入CanvasJS

0 个答案: