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'), {

  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>