我正在用Chart.js绘制一个气泡图。有时大气泡恰好在图的边缘附近，会被截断。因此，我尝试将轴限制扩展到数据范围之外。这个想法就像这个
min_x_axis = min_x_data - (max_x_data - min_x_data) * 0.1
max_x_axis = max_x_data + (max_x_data - min_x_data) * 0.1
我对y轴也这样做。总的来说，它是有效的，但通过在每个方向上延伸10%的轴，情节看起来很丑陋。例如，在x轴的刻度为1,2,3之前。在我扩展轴之后，记号就像这个0.87, 1, 2, 3, 3.12，由于网格线间隔不均匀，这使得绘图看起来有点难看。有没有任何方法可以将轴的刻度向每个方向延伸1步，在这种情况下，刻度将为0,1,2,3,4。
该图的数据范围根据用户输入而急剧变化，因此无法事先知道刻度步骤。
您可以使用grace选项，如下所示：
var options = {
type: 'bubble',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [{
x: 0,
y: 3,
r: 4
}, {
x: -3,
y: 1,
r: 38
}, {
x: 16,
y: -4,
r: 18
}],
backgroundColor: 'pink'
}]
},
options: {
scales: {
x: {
grace: 1
},
y: {
grace: 1
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.js"></script>
</body>宽限期文件：https://www.chartjs.org/docs/master/axes/cartesian/linear.html#grace