我有一个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>
1条答案
按热度按时间xkftehaa1#
不知何故，
width: 100%;不工作，但80vw或90vw工作...别问我为什么。而且100vw仍然有一点溢出（我想是因为滚动条的原因...）我用下面的代码修复了它