ng2-charts：如何设置 y 轴的固定范围答案

【问题标题】：ng2-charts: How to set fixed range for y axisng2-charts：如何设置 y 轴的固定范围
【发布时间】：2019-12-18 21:10:37
【问题描述】：

我有一个使用 ng2-charts 模块的 chart.js 图表。该图表在 y 轴上显示百分比，在 x 轴上显示时间。是否可以根据数据将y轴设置为显示0到100而不是动态范围？

【问题讨论】：

标签： chart.js ng2-charts

【解决方案1】：

尝试将以下内容添加到您的图表选项中：

scales : {
  yAxes: [{
     ticks: {
        steps : 10,
        stepValue : 10,
        max : 100,
        min: 0
      }
  }]
}

https://github.com/valor-software/ng2-charts/issues/853

【讨论】：

【解决方案2】：

以我的名字.component.html:

<div style="display: block">
<canvas baseChart height="100" [datasets]="lineChartData" [labels]="lineChartLabels" [options]="lineChartOptions"
    [colors]="lineChartColors" [legend]="lineChartLegend" [chartType]="lineChartType"></canvas>

以我的名义.component.ts:

 public lineChartOptions: any = {
    scales : {
        yAxes: [{
            ticks: {
            beginAtZero: true,
                stepValue: 10,
                steps: 20,
              max : 50,
            }
        }]
      }
};

【讨论】：

【解决方案3】：

是的，您可以通过在 y 轴中使用 tickOption 来做同样的事情

public barChartOptions: ChartOptions = {
responsive: true,
showLines: false,
tooltips: {enabled: false},
animation: {duration: 2000},
scales: {
    yAxes: [{
        gridLines: {
            display:false
        },
        display: false,
        ticks: {
          max : 100,
          min: 0
        }
    }]
  }
};

另外，steps 和 stepValue 不起作用，我在他们的库中检查了同样的内容，但那里也没有写。

barChartData: ChartDataSets[] = [
          {
            data: [40, 30, 30],
            "backgroundColor": this.bgColors
          }
 ];

在上面，我只需要 y 个条形图，所以我设置了这样的数据，对于三个值，我使用了相同大小的 barChartLabels。

barChartLabels: Label[] = ['A', 'B', 'C'];

这对我有用，我希望它也适用于你的代码:)

【讨论】：