ChartJS：在 y 轴上带有标签的折线图

Question

我是chart.js 的新手，我需要在y 轴上创建一个带有标签的折线图。网上有很多 x 轴上带有标签的示例，但我需要的是带有 y 轴上标签和 x 轴上数字的折线图？ 

Answer 1

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