我是 chart.js 的新手,我需要创建一个在 y 轴上有标签的线图。网上有很多例子,在x轴上有标签,但我需要的是一个在y轴上有标签,在x轴上有数字的线图。
首先,你应该在图表配置参数中定义垂直轴的值。data.yLabels
.
然后你定义 yAxis
作为 喀斯特轴.
此外,你需要定义 xAxis
作为 时轴. 还请确保 data
您的数据集的定义为 分数 通过含有 x
和 y
属性。
请注意,Chart.js内部使用 Moment.js 来实现时间轴的功能。因此你应该使用 捆绑版 的Chart.js,在一个文件中包含了Moment.js。
请看下面的可运行代码示例。
new Chart(document.getElementById('myChart'), {
type: 'line',
data: {
yLabels: ['Suspended', 'Faulty', 'At-risk', 'Unknown', 'Healthy'],
datasets: [{
label: 'My Dataset',
data: [
{ x: '20:28', y: 'Healthy' },
{ x: '20:47', y: 'Healthy' }
],
backgroundColor: 'lightblue',
borderColor: 'blue',
fill: false
}]
},
options: {
responsive: true,
title: {
display: false
},
legend: {
display: false
},
scales: {
yAxes: [{
type: 'category',
ticks: {
reverse: true,
},
gridLines: {
zeroLineColor: 'rgba(0, 0, 0, 0.1)'
}
}],
xAxes: [{
type: 'time',
time: {
parser: 'HH:mm',
unit: 'minute',
stepSize: 5,
tooltipFormat: 'HH:mm'
},
ticks: {
min: '20:25',
max: '20:50',
padding: 10
},
gridLines: {
display: false
}
}],
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="80"></canvas>