我正在尝试<canvas>
在<div>
. 我希望图形具有响应性,固定高度为 700 像素,宽度为页面宽度的 80%。最重要的是,我希望这个图表在页面内居中!我的代码在下面
HTML
<div class='chartContainer'>
<canvas id="canvas"></canvas>
</div>
Run Code Online (Sandbox Code Playgroud)
CSS
.chartContainer{
text-align: center;
}
canvas{
width: 80% !important;
height: 700px !important;
margin: 0;
}
Run Code Online (Sandbox Code Playgroud)
爪哇脚本
new Chart(canvasContext, {
type: 'line',
data: {
labels: hourLabels,
datasets: dataToRender
},
options: {
responsive: true,
maintainAspectRatio: false
});
Run Code Online (Sandbox Code Playgroud)
我的问题是:我无法将它居中,它<div>
占据整个页面,但<canvas>
似乎应用了边距,即使它没有出现在 DOM 控制台内...
谁能指出我的问题?非常感谢 :-)