我所有的标签都在栏的顶部。我可以看到这个：
but I want that would be like this:
填充不适用于税费，但适用于税费。
legend: {display: false},
scales: {
xAxes: [{
position: 'top',
stacked: true,
ticks: {
stepSize: 1,
min: 0,
autoSkip: false,
fontColor: '#3f7ba2',
fontStyle: 600,
fontFamily: 'Italic',
},
gridLines: {
color: '#dedfe7',
tickMarkLength: 0,
}
}],
yAxes: [{
stacked: true,
ticks: {
min: 0,
fontColor: '#62aae8',
padding: 5
},
gridLines: {
color: '#dedfe7' //b5cce2
}
}],
}
此问题仅在 Chart.js 版本 2.6.0 及更低版本中存在。正如您可以在发行说明 https://github.com/chartjs/Chart.js/releases/tag/v2.7.0在错误修复下它说 PR 4403ticks.padding选项现在适用于垂直和水平比例。
因此，要解决您的问题，您需要更新到高于或等于 2.7.0 的 Chart.js 版本
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
scales: {
xAxes: [{
position: 'top',
ticks: {
padding: 100
}
}],
}
}
}
const 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/2.7.0/Chart.js"></script>
</body>