ng2-charts如何标记y轴？

Question

无法弄清楚如何使用NG2图表标记y轴。文档似乎只有关于标记x轴的信息，直接使用charts.js方法没有任何结果。

表单component.ts：

  public barChartOptions = {
    scaleShowVerticalLines: false,
    maintainAspectRatio: false,

    yAxes: [{
      scaleLabel: {
        display: true,
        labelString: 'Frequency Rate'
      }}]
    //responsive: true
  };

HTML：

<script src="node_modules/chart.js/src/chart.js"></script>

<!--<button mat-button mat-raised-button color="primary" (click)="populate_data()">Update</button>-->

<div>
  <canvas baseChart class="chart" height ='450'

        [datasets]="barChartData"
        [labels]="barChartLabels"
        [options]="barChartOptions"
        [legend]="barChartLegend"
        [chartType]="barChartType">

      </canvas>
    </div>

Answer 1

ng2-charts是一个围绕原始chart.js库的封装角库。

chart.js中的文档更为详细：https://www.chartjs.org/docs/latest/charts/bar.html

如何使用ng2图表标记y轴

在chart.js中，y轴的刻度是根据推送到ChartDataSets[]中的数据自动确定的

例如，最大y轴值将为99

public barChartData: ChartDataSets[] = [
    { data: [5, 1, 99], label: 'Series A' },
    { data: [6, 10, 45], label: 'Series B' }
];

要控制y轴刻度线的外观，请参阅此文档：https://www.chartjs.org/docs/latest/axes/cartesian/linear.html

因此，如果您希望将tick的stepSize控制为增量2，您可以这样做：

yAxes: [{
   ticks: {
      stepSize: 2,
      beginAtZero: true
   }
}]

如果要将最大y轴记号标签设置为始终为100，请按如下方式定义选项：

yAxes: [{
   ticks: {
      max: 100
   }
}]

要标记y轴，请执行以下操作：

public barChartOptions: ChartOptions = { // import { ChartOptions } from 'chart.js'; 
   ...
   responsive: true,
   maintainAspectRatio: false,
   ...
   scales: { //you're missing this
      yAxes: [{
         scaleLabel: {
            display: true,
            labelString: 'Frequency Rate'
         }
      }]
   }//END scales
};

Answer 2

这应该会有帮助，别忘了为每个设置"display:true“。对我来说很管用

ChartOptions: any = {
 responsive: true,
 scales: {
  yAxes: [
   {
    display: true,
    scaleLabel: {
     display: true,
     labelString: "Number of Reads",
    },
   },
  ],
  xAxes: [
   {
    scaleLabel: {
     display: true,
     labelString: "Date",
    },
   },
  ],
 },
};