Question

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

Answer 1

首先，您应该在图表配置参数<app-dynamica-stepper [isFrom]="'GReport'" *ngIf="showstepper" (modalEvent)="modalEvent($event)" [isApplicable]="isApplicable" [finalArray]="finalMandatoryArrayData" [preDoc]="'Submitted Document'" [needVerify]="false" [headerList]="stepperHeaderList" [lDetail]="lDetailObject"> </app-dynamica-stepper> <ckeditor name="editor1" value="{{nContent}}" formControlName="pData" [(ngModel)]="nContent" skin="moono-lisa" language="en"> </ckeditor>中定义垂直轴的值。

然后将data.yLabels定义为category cartesian axis。

此外，您需要将yAxis定义为time cartesian axis。还要确保通过包含xAxis和data属性的对象将数据集的x定义为individual points。

请注意，Chart.js在内部将Moment.js用于时间轴的功能。因此，您应该使用在单个文件中包含Moment.js的Chart.js的bundled version。

请查看下面的可运行代码示例。

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
        }
      }],
    }
  }
});

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

1 个答案: