Apex Charts坐标轴无法设置浮点型最小/最大值怎么办？

我之前也碰到过这个问题，其实核心是坐标轴的配置项没调整到位——Apex Charts本身完全支持浮点型数值，下面给你几个关键的修复步骤：

1. 确保坐标轴类型为numeric #

首先检查你配置的坐标轴（x轴或y轴）的type属性，如果你不小心设成了integer，就会强制只能使用整数。把它改成numeric（这也是默认值，但有时候会被误改）：

yaxis: {
  type: 'numeric', // 关键：必须是numeric类型，而非integer
}

2. 直接设置浮点型的min/max值 #

当坐标轴类型是numeric时，你可以直接给min和max赋值浮点数，不需要额外转换：

yaxis: {
  type: 'numeric',
  min: 0.3, // 浮点最小值
  max: 7.9, // 浮点最大值
}

3. 调整刻度步长与显示格式 #

如果设置了浮点的min/max后，刻度还是只显示整数，那你需要调整stepSize（刻度之间的间隔），同时通过labels.formatter来控制数值的显示格式：

yaxis: {
  type: 'numeric',
  min: 0.3,
  max: 7.9,
  stepSize: 0.8, // 浮点步长，控制相邻刻度的差值
  labels: {
    formatter: function(val) {
      return val.toFixed(1); // 显示小数点后1位，可根据需求调整位数
    }
  }
}

4. 特殊场景：自动适配浮点刻度 #

如果你不想手动设置stepSize，可以开启forceNiceScale让图表自动计算合适的浮点刻度：

yaxis: {
  type: 'numeric',
  min: 0.3,
  max: 7.9,
  forceNiceScale: true, // 自动调整刻度为合适的浮点值
}

完整示例代码 #

这里给你一个包含浮点坐标轴配置的完整折线图示例：

var options = {
  chart: {
    type: 'line'
  },
  series: [{
    name: 'Sales',
    data: [1.2, 3.5, 2.7, 5.1, 4.3]
  }],
  xaxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
  },
  yaxis: {
    type: 'numeric',
    min: 0.5,
    max: 5.5,
    stepSize: 1.0,
    labels: {
      formatter: function(val) {
        return val.toFixed(1);
      }
    }
  }
}

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

只要按照上面的配置调整，你的坐标轴就能正常支持浮点型的最小/最大值了。

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