我正在使用chart.js创建一个图表,该图表表示一个棒球打击区,其中x和y轴具有特定的宽高比。我将极限分别设置为-2、2和-3、3,尽管图表正确地绘制了数据,但它始终显示为正方形。是否可以在两个轴上使用相同的物理尺寸刻度线,以便图表将显示为矩形?
图表代码段:
var myChart = $("#canvas5");
var chart5 = new Chart(myChart, {
type: 'bubble',
data: {
datasets: datasets
},
options: {
maintainAspectRatio: true,
responsive: false,
legend: {
display: true,
labels: {
filter: function(legendItem, data) {
return legendItem.text != undefined // catches line data with undefined labels
},
fontSize: 14
},
position: 'right'
},
layout: {
padding: {
left: 200, // helps scale the axes
right: 150, // helps scale the axes
top: 0,
bottom: 0
}
},
title: {
display: true,
text: 'Pitch Location Map',
fontSize: 20
},
scales: {
yAxes: [{
ticks: {
stepSize:1,
min:-3,
max:3
}
}],
xAxes: [{
ticks: {
stepSize:1,
min:-2,
max:2
}
}]
}
}
});
这是图表现在的外观。即使范围不同,也可以查看轴的物理尺寸如何相同。