Question

我希望从左到右有两个画布用于两个地块。似乎第二个画布将自动创建在第一个画布的下方，并且指定位置后，它们将在画布下方占据较大空间。

由于画布是在我的项目中的一个循环中创建的，因此网络上的空白太多，我希望使用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和canv2下方留有200个高度的空间。

我如何让它们消失？预先感谢。

Answer 1

类似以下内容？如果您需要在页面上放置更具体的位置，则可以将它们包装在一个容器中，以便于移动。

编辑：已更新，包括居中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>

是否可以在另一个画布旁边没有一个画布，而在底部没有空格？

1 个答案: