我正在使用ChartJS显示一些每月数据,请参见屏幕截图:
yAxis标签是重叠的,我想避免这种情况,我也注意到xAxis标签并非全部丢失(3/18,5/18)。
我希望它能完全显示出来,创建高度,或者使标签变小,以便适合xAxis标签。
如果不是这样,则可以使图表可滚动。
我不知道如何实现这两种解决方案
var labels = JSON.parse('[labels-come-here]');
var data = JSON.parse('[data-comes-here]');
var chart = new Chart(document.getElementById("my_chart"), {
type: 'bar',
responsive: true,
data: {
labels: labels,
datasets: [
{
backgroundColor: "rgba(240,184,35, 0.6)",
borderColor: ["rgba(240,184,35, 1)"],
borderWidth: 1,
data: data
}
]
},
options: {
legend: {
display: false
},
title: {
display: true
},
scales : {
xAxes : [ {
barPercentage: 0.7,
gridLines : {
display : false
},
ticks: {
fontColor: "#1e2125",
fontSize: 13,
stepSize: 1,
beginAtZero: true
}
} ],
yAxes : [ {
stepSize: 80,
labelAutoFit: true,
ticks: {
fontColor: "#1e2125",
fontSize: 13,
labelAutoFit: true,
stepSize: 80,
suggestedMin: 0
}
} ]
}
}
});