chart.js 根据数组的值动态设置建议的最小值和建议的最大值

Question

问题

使几条曲线的图表更具可读性-尤其是这种浅绿色，在某些地方具有相同的值并且是直的

如何解决这个问题

设置 y 轴的最小值和最大值 iot 在曲线上方和下方留出更多空间。 此值可以通过以下代码设置：

public lineChartOptions:any = {            
    scales: {
        yAxes: [{
          id: 'SeriesA',
          position: 'left',
          ticks: {
            suggestedMin: 0,
            suggestedMax: 100
          }
        }]
    }
};

Chart.js 会自动计算这个最小值和最大值，但是在某些地方我想扩展它（通过设置建议最小值和建议最大值）。值应基于数组的最小值（缩小 10%）和数组的最大值（放大 10%）。

对于这样的示例数据，我希望 Y 轴的最小值为 54，最大值为 66

public seriesA: Array<number> = [59.023, 59.023, 59.034, 59.034, 59.034, 59.039, 59.05, 59.061, 59.088, 59.104];
    
public minMaxSeries: Array<number> = [0, 0];

 ngOnInit(): void {
    // calc min and max value of array
    this.minMaxSeries[0] = this.seriesB.reduce((prev, curr) => {
      return Math.min(prev, curr);
    });
    this.minMaxSeries[1] = this.seriesB.reduce((prev, curr) => {
      return Math.max(prev, curr);
    });
  
    // set values of min and max to the nearest integer value depends on its positive and negative values
    if (this.minMaxSeries[0] >= 0) {
      this.minMaxSeries[0] = Math.ceil(this.minMaxSeries[0] - 0.1 * this.minMaxSeries[0]);
    } else {
      this.minMaxSeries[0] = Math.floor(this.minMaxSeries[0] + 0.1 * this.minMaxSeries[0]);
    }
    if (this.minMaxSeries[1] >= 0) {
      this.minMaxSeries[1] = Math.ceil(this.minMaxSeries[1] + 0.1 * this.minMaxSeries[1]);
    } else {
      this.minMaxSeries[1] = Math.floor(this.minMaxSeries[1] - 0.1 * this.minMaxSeries[1]);
    }
    console.log(this.minMaxSeries)
  }

我的代码： Angular project

Answer 1

更改 minMaxSeries 上的值不会改变 lineChartOptions。如果在ngOnInit() 的末尾添加console.log(this.lineChartOptions);，您将看到suggestedMin 和suggestedMax 的值仍然为零。

要解决您的问题，您应该直接在lineChartOptions 上设置选项，如下所示：

this.lineChartOptions.scales.yAxes[0].ticks.suggestedMin = min;
this.lineChartOptions.scales.yAxes[0].ticks.suggestedMax = max;

ngOnInit() 方法可以简化如下。

ngOnInit(): void {
  this.lineChartOptions.scales.yAxes[0].ticks.suggestedMin = Math.floor(Math.min(...this.seriesB));
  this.lineChartOptions.scales.yAxes[0].ticks.suggestedMax = Math.ceil(Math.max(...this.seriesB));
}  

请查看您修改后的StackBlitz。