我希望从左到右有两个图的画布。似乎第二个画布将自动在第一个画布下方创建，并且在指定位置的情况下，它们将是画布下方的大空间。
由于画布是在我的项目中循环中创建的，因此网络上有太多的空白，我希望它们与javascript一起使用。
以下是我所拥有的。
<script type="text/javascript">
var canv = document.createElement("canvas");
canv.setAttribute('width', 200);
canv.setAttribute('height', 200);
canv.setAttribute('id', 'canv'+{{res.2}});
document.body.appendChild(canv);
var C = document.getElementById(canv.getAttribute('id'));
if (C.getContext) {
if (C.getContext) {
new Chart(document.getElementById(canv.getAttribute('id')), {
type: 'line',
data: {
labels: ["a1","a2","a3"],
datasets: [
{
label: ["AAA"],
backgroundColor: "rgba(62, 149, 205, 0.5)",
borderColor : "rgba(62, 149, 205, 1)",
pointBackgroundColor: "rgba(62, 149, 205, 1)",
data: [{{res.3}},{{res.4}},{{res.5}}] //numeric value
},
]
},
options: {
responsive: false,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
}
}
var canv2 = document.createElement("canvas");
canv2.setAttribute('width', 200);
canv2.setAttribute('height', 200);
canv2.setAttribute('id', 'canv2_'+{{res.2}});
document.body.appendChild(canv2);
var C2 = document.getElementById(canv2.getAttribute('id'));
C2.style.left='200px';
C2.style.top='-200px';
C2.style.position="relative";
if (C2.getContext) {
if (C2.getContext) {
new Chart(document.getElementById(canv2.getAttribute('id')), {
type: 'line',
data: {
labels: ["b1","b2","b3"],
datasets: [
{
label: ["BBB"],
backgroundColor: "rgba(62, 149, 205, 0.5)",
borderColor : "rgba(62, 149, 205, 1)",
pointBackgroundColor: "rgba(62, 149, 205, 1)",
data: [{{res.12}},{{res.13}},{{res.14}}] //numeric value
},
]
},
options: {
responsive: false,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
}
}
</script>
上方在每个canv下方留下高度为200的空间，并创建了canv2。
我怎样才能让它们消失？提前谢谢。
像下面这样的东西？如果您需要在页面上进行更具体的位置，可以将它们包装在一个可以更轻松地移动的容器中。
编辑：更新以包括居中 CSS。可能对片段预览的头脑有点紧张。
<html>
<head>
<style>
html, body{
width:100%;
height:100%;
margin:0px;
border:0px;
padding:0px;
box-sizing:border-box;
}
#canvas_container{
position: absolute;
left:50%; /* put 50% of containing div's width to my left */
transform: translate(-50%); /* now move me back half of my own width */
}
</style>
</head>
<body>
<div id="canvas_container">
</div>
<script type="text/javascript">
function createCanvas() {
let canv = document.createElement('canvas')
canv.height = 150;
canv.width = 150;
canv.style.backgroundColor = 'red';
canv.style.border = '1px solid black'
canv.style.position = 'relative';
canv.style.float = 'left';
document.getElementById('canvas_container').appendChild(canv);
}
createCanvas();
createCanvas();
</script>
</body>
</html>