我目前有一个包含div内的chart.js甜甜圈的画布,如下所示:
画布具有红色背景色,以提高可见性。现在,图表在画布上居中,并在其侧面增加了填充。我希望图表填满整个画布,以便根本没有填充,以便可以像上面的“ CPU”一词那样对齐画布。在chart.js中为此有一些选择吗?
这是html:
<p class="header">CPU</p>
<div class="doughnut-canvas-container">
<canvas id="doughnut-canvas" class="chartjs-render-monitor"></canvas>
</div>
和CSS:
.header {
color: white;
font-size: 16px;
font-weight: bold;
font-size: Verdana;
padding-left: 10px;
}
.doughnut-canvas-container {
width: 30%;
}
#doughnut-canvas {
background-color: red;
}
答案 0 :(得分:2)
在没有看到用于创建图表的代码的情况下,只能猜测可能是什么问题。
通常来说,如果禁用legend
和title
,则图表应填充到画布的边缘,如下所示:
new Chart(
document.getElementById('doughnut-canvas'),
{
type: 'doughnut',
data: {
datasets: [{
data: [2, 1],
}]
},
options: {
legend: {
display: false
},
title: {
display: false
}
}
}
);
body {
background-color: #000;
}
.header {
color: white;
font-size: 16px;
font-weight: bold;
font-size: Verdana;
padding-left: 10px;
}
.doughnut-canvas-container {
width: 30%;
}
#doughnut-canvas {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<p class="header">CPU</p>
<div class="doughnut-canvas-container">
<canvas id="doughnut-canvas" class="chartjs-render-monitor"></canvas>
</div>