chart.js如何使x轴标签位于顶部

Question

我是chart.js的新手，我有一个关于使x轴标签位于顶部的问题。

这就是我所期望的结果：x轴标签位于顶部。

这是我的尝试：

const ctx = document.getElementById('weather_chart');
const myChart = new Chart(ctx, {
data: {
datasets: [{
type: 'bar',
label: 'rainfall probability',
data: [10, 20, 30, 40],
}, {
type: 'line',
label: 'temperature',
data: [50, 50, 50, 50],
borderColor: '#EB6E4B',
backgroundColor: '#EB6E4B',
}],
labels: ['now', '9am', '10am', '11am', '12pm'],
},
options: {
plugins: {
legend: {
display: false,
},
}
}
});

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div id="chart">
<canvas id="weather_chart"></canvas>
</div>

如果可能的话，你会慢慢写答案吗？

提前谢谢，如果我的问题不够，如果你能告诉我，我将不胜感激。

Answer 1

您可以配置所有与比例相关的东西，比如这个名称空间中的位置：options.scales[scaleId]。有关天平的更多配置选项，您可以阅读文档：https://www.chartjs.org/docs/master/axes/

const ctx = document.getElementById('weather_chart');
const myChart = new Chart(ctx, {
data: {
datasets: [{
type: 'bar',
label: 'rainfall probability',
data: [10, 20, 30, 40],
}, {
type: 'line',
label: 'temperature',
data: [50, 50, 50, 50],
borderColor: '#EB6E4B',
backgroundColor: '#EB6E4B',
}],
labels: ['now', '9am', '10am', '11am', '12pm'],
},
options: {
scales: {
x: {
position: 'top'
}
},
plugins: {
legend: {
display: false,
},
}
}
});

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div id="chart">
<canvas id="weather_chart"></canvas>
</div>

Answer 2

内部选项>刻度>xAxes xAxes是一个数组，所以我们可以定义多个轴，这样配置：

options:{
scales: {
xAxes: [
{
position: 'top',
ticks: {
maxRotation: 90,
minRotation: 80
}
}
]
}
}

请在此处查看示例https://codepen.io/ganeshbkdm/pen/oNeaOwm