Handsontable 中的科学记数法答案

【问题标题】：Scientific Notation in HandsontableHandsontable 中的科学记数法
【发布时间】：2018-07-03 00:44:44
【问题描述】：

寻找一种显示科学计数法的方法 (12000 = 1.2e+4) 与 Handsontable v0.33.0

我在Numbro 中找到了格式化数字的文档，但它似乎是为了显示统计数据和货币（即1230974 使用format: '0.0a' 给出1.2m）

理想情况下，我希望将数字格式化为 d3-format 处理此问题的方式

var value = 1230974
var formattedValue = d3.format(".3")(value)
console.log(formattedValue) // expected value: "1.23e+6"

【问题讨论】：

使用Number(value).toExponential()获取格式化字符串，然后在custom rendeder中使用呢？
我现在正在尝试一些使用这两个建议的解决方法。麻烦的是，我不想一直使用 Exp，只有在有意义的时候才能使用它。我会看看我想出什么
如果你有自定义渲染器，那么你可以用任何你想要的方式将数字转换为字符串。例如，仅当尾随零的数量大于前导数字的数量时，您可能有“智能”方法，例如使用指数格式。像 12300 一样，但 1230000 是 1.23e+6。请参阅此示例：jsfiddle.net/6rjne8sk
让自定义渲染器工作比我想象的要难，因为我使用的是 VueJS 和 vue-handsontable-official。问题在于注册自定义渲染器，因为我想不出如何访问 Vue 组件内部使用的 Handsontable 实例。在this github issue 上找到了使用 cmets 的解决方法，但看起来我必须分叉回购。

标签： javascript d3.js handsontable

【解决方案1】：

这是我遵循 @andy 的建议并在 Handsontable Custom renderers 上阅读后得出的结论

var sensibleNumericRenderer = (hotInstance, td, row, column,
                               prop, value, cellProperties) => {
  Handsontable.renderers.BaseRenderer.apply(this, arguments);

  let prec = 4
  let str

  var val = Handsontable.helper.stringify(value)

  if(val === "") {
    str = val
  }
  else {
    val = +val //convert to Number

    //convert numbers that are too large or too small
    if(val !== 0 && (Math.abs(val) > 1e4 || Math.abs(val) < 1e-2)) {
      //truncate to 4 significant figures then convert to scientific notation
      str = Number.parseFloat(val.toPrecision(prec)).toExponential()
    }
    else {
      // works nicely for small integers or larger decimal fractions
      str = d3.format(`.${prec}`)(val)
    }
  }
  td.innerHTML = str
  return td
}

Handsontable.renderers.registerRenderer("sensibleNumeric", sensibleNumericRenderer)

【讨论】：