如何解决Chart.js - 向轴添加 1 个刻度步
我正在用 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,3,3.12 ，由于网格线间隔不均匀，这使得情节看起来有点难看。有什么办法可以在每个方向上将轴 1 步的刻度延长，在这种情况下，刻度将是 0,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
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
