我想创建一个内部包含 Chart.js 图表的容器,但诀窍是图表必须保持相对于其父级的响应,而不仅仅是对视口(viewport)的响应 - 因为父级应该可以调整大小......如何我可以让它“意识到”以便它正确拉伸(stretch)..?我尝试了几种方法,但都没有奏效。这是带有示例的笔:
https://codepen.io/anon/pen/BeYWNw
.container {
width: 100%;
resize: both;
overflow: auto;
border: 1px solid blue;
}
非常感谢任何建议!
最佳答案
您需要将 .container
设置为:
position: relative;
overflow: hidden;
如果您希望图表适合 div
,请设置 maintainAspectRatio: false
。
这是一个工作示例:
let myChart = new Chart(
document.getElementById('chart'), {
type: 'bar',
data: {
labels: ['a', 'b', 'c'],
datasets: [{
label: 'Series1',
data: [1, 10, 6]
}]
},
options: {
maintainAspectRatio: false
}
}
);
.container {
border: 1px solid #000;
overflow: hidden;
position: relative;
resize: both;
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<div class="container">
<canvas id="chart"></canvas>
</div>
关于javascript - 使 Chart.js Canvas 在可调整大小的 div 内响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56274596/