我正在尝试这样做:ChartJS multiple sub labels for label
这个老问题使用v2,我现在使用v4,我还希望有一些组比其他组具有更多的子项。下面是一个粗略的代码,接近我想要的:
<canvas id="myChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.min.js"></script>
<script>
new Chart('myChart', {
type: "bar",
data: {
labels: ["A", "B", "C", "D", "E"],
datasets: [
{
label: 'Min',
data: [7.16, 1, 2.8, 1, 16]
},
{
label: 'Max',
data: [85.86, 29.55, 181.78, 70.54, 89]
},
{
label: 'Average',
data: [29.03, 13.17, 39.13, 40.61, 51.50]
}
]
},
options: {
indexAxis: 'y',
plugins: {
legend: {
position: 'bottom'
}
},
scales: {
y: {
reverse: true
},
customGroups: {
labels: ['Group 1', 'Group 2', 'Group 3'],
axis: 'y',
reverse: true,
ticks: {
maxRotation: 90,
minRotation: 90,
major: {
enabled: true
},
align: 'end'
}
}
}
}
});
</script>
我正在寻找的是第1组围绕标签A,第2组围绕标签B,C,D,第3组围绕标签E。组应在这些行中居中。
我对另一个图书馆很开放,但这一个似乎是最好的。
1条答案
按热度按时间vcirk6k61#
显然,当
ticks
旋转时,ticks.align
没有效果。你可以使用ticks.labelOffset
。有关详细信息,请参阅图表中所有笛卡尔坐标轴的通用刻度选项。js文档。请看一下下面修改后的可运行代码,看看它是如何工作的。