基于documentation ,Chart.js 中标题的 padding
属性可调整顶部和底部填充。但是,我只想调整底部填充。
我尝试过使用填充对象:
title:{
display: true,
text:'Population of cities in California',
padding:{
left:0,
right:0,
bottom:30,
top:0
}
}
但这可能不受支持,因为它只会把一切搞乱,甚至使图表不可见。 我搜索了文档并用谷歌搜索了一下,看看是否已经有人问过这个问题,但我找不到任何解决方案。
Chart.js 中是否有内置方法可以执行此操作?如果没有,最简单的解决方法是什么?
最佳答案
title.padding
获取在标题文本上方和下方添加的像素数。
存在一种解决方法,可以仅在图表标题的底部添加填充。 Plugin Core API提供了一系列可用于执行自定义代码的 Hook 。您可以使用 afterDraw
钩子(Hook)使用 CanvasRenderingContext2D.fillText()
直接在 Canvas 上绘制标题。 .
plugins: [{
afterDraw: chart => {
var ctx = chart.chart.ctx;
ctx.save();
ctx.textAlign = 'center';
ctx.font = "18px Arial";
ctx.fillStyle = "gray";
ctx.fillText('My Title', chart.chart.width / 2, 20);
ctx.restore();
}
}],
除此之外,您还必须定义 top padding为你的图表。这决定了标题和图表之间的空间(基本上是标题底部填充)。
layout: {
padding: {
top: 80
}
},
请看一下下面的代码,它显示了它的样子。
new Chart(document.getElementById('myChart'), {
type: 'bar',
plugins: [{
afterDraw: chart => {
var ctx = chart.chart.ctx;
ctx.save();
ctx.textAlign = 'center';
ctx.font = "18px Arial";
ctx.fillStyle = "gray";
ctx.fillText('My Title', chart.chart.width / 2, 20);
ctx.restore();
}
}],
data: {
labels: ['A', 'B', 'C', 'D'],
datasets: [{
data: [10, 12, 8, 6],
backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(75, 192, 192, 0.2)'],
borderColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)'],
borderWidth: 1
}]
},
options: {
layout: {
padding: {
top: 80
}
},
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>
关于javascript - 有没有办法只调整 Chart.js 中图表标题的底部填充?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62143606/