如何在Chart.js图表中为数值添加百分号显示？

常见场景下的百分号添加方案 #

1. 纯JS/TS 数值处理

直接对数值做字符串拼接，需要保留固定小数位数可以搭配toFixed()方法：

// 示例数值，比如已拿到的数值23.5对应23.5%
const num = 23.5
// 直接拼接输出 "23.5%"
const percentStr = `${num}%`
// 保留2位小数的处理方式
const fixedPercent = `${num.toFixed(2)}%`

如果拿到的是小数形式的比值（比如0.235对应23.5%），先乘100再处理：

const rate = 0.235
const percentStr = `${(rate * 100).toFixed(1)}%`

2. ECharts 类图表配置

直接在格式化配置项中拼接百分号即可：

option = {
  // 提示框数值加百分号
  tooltip: {
    formatter: '{b}: {c}%'
  },
  series: [{
    type: 'bar',
    data: [23, 45, 67],
    // 图表上的标签数值加百分号
    label: {
      show: true,
      formatter: '{c}%'
    }
  }]
}

3. Python Matplotlib/Seaborn 图表

可以用自带的PercentFormatter实现：

import matplotlib.pyplot as plt
from matplotlib.ticker import PercentFormatter

fig, ax = plt.subplots()
# 数值本身是0-1的比值时直接用
ax.yaxis.set_major_formatter(PercentFormatter())
# 如果数值已经是乘过100的百分比数值，调整xmax参数即可
# ax.yaxis.set_major_formatter(PercentFormatter(xmax=100))

4. Vue/React 前端框架渲染

直接在模板内拼接百分号：

<!-- Vue 模板示例 -->
<template>
  <div>{{ rate }}%</div>
  <div>{{ (rate * 100).toFixed(2) }}%</div>
</template>

// React 组件示例
function PercentDisplay({ rate }) {
  return <div>{`${(rate * 100).toFixed(2)}%`}</div>
}

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