chart.js 响应问题 |与最大宽度为 800px 的父容器缩放不起作用

Question

我有一个

chart.js

图表嵌套在 2 个

div

容器中。外部

div

容器有

max-width 800px

，内部容器有

width 100%

。画布本身没有应用样式。请参阅下面的代码... 为什么图表不使用

max-width 800px

调整大小并直接忽略它？

*{
    padding: 0;
    margin: 0;
}

body{
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
}
.bodycontainer{
    border: 2px dashed red;
    height: 200vh;
    max-width: 800px;
    margin: auto;
    position: relative;
}
#canvasContainer{
    margin-top: 300px;
    border: 2px dashed blue;
    position: relative;
    width: 100%;
    height: 400px;
}

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>

<body>
    <div class="bodycontainer">
        <div id="canvasContainer">
            <canvas id="myChart"></canvas>
        </div>
    </div>

    <script>
        var data = {
            labels: ["Aug", "Sep", "Okt", "Nov", "Dez", "Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug"],
            datasets: [
                {
                    label: "Desktop",
                    data: [38.53, 39.27, 39.72, 39, 37.71, 39.41, 38.6, 40.8, 44.4, 47.41, 42.2, 42.4, 43.72],
                    backgroundColor: 'rgba(115, 157, 255, 1)',
                    borderColor: 'rgba(115, 157, 255, 1)',
                    borderWidth: 1,
                },
                {
                    label: "Mobil",
                    data: [59.25, 58.64, 58.27, 59.02, 60.29, 58.52, 59.36, 57.18, 53.61, 50.71, 55.87, 55.67, 54.41],
                    backgroundColor: 'rgba(255, 115, 115, 1)',
                    borderColor: 'rgba(255, 115, 115, 1)',
                    borderWidth: 1,
                },
                {
                    label: "Tablet",
                    data: [2.22, 2.09, 2.02, 1.98, 2, 2.07, 2.04, 2.02, 1.99, 1.88, 1.92, 1.93, 1.87],
                    backgroundColor: 'rgba(147, 255, 115, 1)',
                    borderColor: 'rgba(147, 255, 115, 1)',
                    borderWidth: 1,
                }
            ]
        };
        var options = {
            maintainAspectRatio: false,
            responsive: true,
            scales: {
                x: {
                    title: {
                        display: true,
                        text: 'Months',
                    },
                },
                y: {
                    title: {
                        display: true,
                        text: 'Percent',
                    },
                    min: 0,
                    max: 100,
                    ticks: {
                        stepSize: 10,
                    },
                },
            },
        };
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: data,
            options: options,
        });
    </script>

</body>

Answer 1

不知怎的，

width: 100%;

不起作用，但

80vw

或

90vw

起作用......不要问我为什么。而且

100vw

仍然有一点溢出（因为我认为滚动条......）我用下面的代码修复了它

#canvasContainer{
    border: 2px dashed blue;
    position: relative;
    width: 80vw;
    max-width: 600px;
    margin: 0 auto;
}

chart.js 响应问题 |与最大宽度为 800px 的父容器缩放不起作用

问题描述投票：0回答：1

1个回答

最新问题

chart.js 响应问题 |与最大宽度为 800px 的父容器缩放不起作用

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1