AngularJS项目中如何组合Plotly.js的y轴刻度格式？

算力阿峰

2026-7-6

解决Plotly.js y轴刻度同时限制3位数字+无小数的问题

直接组合tickformat的格式字符串行不通，因为Plotly依赖的d3-format语法里，s（SI前缀格式）和f（定点格式）属于不同类型，没法直接拼接。给你两种实用方案：

方案1：保留SI前缀（如k、M），同时去掉小数

适合大数字场景，比如1234显示为1k、12345显示为12k、123456显示为123k，既保持3位数字长度，又无小数。用自定义格式化函数实现：

yaxis: {
  tickformat: function(value) {
    // 先用d3的.3s格式生成带小数的字符串
    let formatted = Plotly.d3.format('.3s')(value);
    // 去掉小数点及后面的数字
    return formatted.replace(/\.\d+/, '');
  }
}

方案2：无SI前缀，直接保留3位有效数字的整数

适合不需要单位缩写的场景，比如1234显示为1230、123456显示为123000，同样满足3位数字限制+无小数：

yaxis: {
  tickformat: function(value) {
    if (value === 0) return '0';
    // 计算数字量级，生成3位有效数字的整数
    const magnitude = Math.floor(Math.log10(Math.abs(value)));
    const scale = Math.pow(10, magnitude - 2);
    const rounded = Math.round(value / scale) * scale;
    return rounded.toString();
  }
}