如何在数值范围较小时让Apexcharts的y轴forceNiceScale属性生效

核心问题原因 #

你之前使用的forceNiceScale配置作用是让Apexcharts自动生成整数值的均匀美观刻度，本身没有强制y轴最小值为0的逻辑：当数值范围较小时，算法会自动将起始刻度调整到大于0的数值来优化刻度分布，因此会出现小数值范围下不生效的问题。

解决方法 #

在yaxis配置中新增min: 0即可强制y轴从0开始显示，该配置优先级高于forceNiceScale的自动刻度计算，你可以保留forceNiceScale来实现自动生成美观最大刻度的效果，配置示例如下：

yaxis: {
  min: 0, // 核心配置，强制y轴最小值为0
  forceNiceScale: true
}

Angular项目完整示例 #

在使用ng-apexcharts的Angular项目中，完整配置参考如下：

• 组件ts文件配置

import { Component } from '@angular/core';
import { ChartOptions } from 'ng-apexcharts';

@Component({
  selector: 'app-bar-chart',
  templateUrl: './bar-chart.component.html'
})
export class BarChartComponent {
  public chartOptions: Partial<ChartOptions> = {
    series: [
      {
        name: '数据指标',
        // 小范围数值测试数据，配置后y轴依然会从0开始
        data: [1.2, 2.5, 0.8, 3.1, 1.9]
      }
    ],
    chart: {
      type: 'bar',
      height: 350
    },
    xaxis: {
      categories: ['选项1', '选项2', '选项3', '选项4', '选项5']
    },
    yaxis: {
      min: 0,
      forceNiceScale: true
    }
  };
}

• 组件html文件引用

<apx-chart
  [series]="chartOptions.series"
  [chart]="chartOptions.chart"
  [xaxis]="chartOptions.xaxis"
  [yaxis]="chartOptions.yaxis"
></apx-chart>

内容的提问来源于stack exchange，提问作者Mariem