ChartJS:Y轴上有标签的直线图。

问题描述 投票:0回答:1

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

javascript angularjs graph chart.js
1个回答
0
投票

首先,你应该在图表配置参数中定义垂直轴的值。data.yLabels.

然后你定义 yAxis 作为 喀斯特轴.

此外,你需要定义 xAxis 作为 时轴. 还请确保 data 您的数据集的定义为 分数 通过含有 xy 属性。

请注意,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>
© www.soinside.com 2019 - 2024. All rights reserved.