作者:懒得张开眼睛看你 | 来源:互联网 | 2022-12-07 15:10
我们在代码库中使用Chart.js库,我需要创建一个直方图,这不是它们的默认图表类型之一。因此,我尝试覆盖条形图上的x轴刻度线,以使其出现在每个条形的左,右角,而不是直接在其下方。
在下面的示例中,通过在labels
数组中添加一个额外的项并在中显示第二个x轴,我获得了所需的x轴options
。但是,因为现在有了一个额外的标签,所以条形图占据了宽度的4/5处,为不存在的数据点留出了空间。
我可以指定某种方式来忽略丢失的数据点吗?或抵消酒吧?还是我吠错了树?
该文档很难解析,因此我不确定是否缺少一些简单的东西。
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [0, 1, 2, 3, 4],
datasets: [{
label: 'Group A',
data: [12, 19, 3, 5],
backgroundColor: 'rgba(255, 99, 132, 1)',
}]
},
options: {
scales: {
xAxes: [{
display: false,
barPercentage: 1.30,
}, {
display: true,
}],
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
canvas { max-width: 200px; }