Vue-Chart.js中PolarArea图表标签百分比格式化问题

针对你使用 chart.js@^4.3.0、vue-chartjs@^5.2.0 时，PolarArea 图表无法将原始小数（如0.957）格式化为百分比（如95.7%）的问题，以下是有效的配置方案：

核心问题分析 #

你之前的配置无效主要有两个原因：

1. Chart.js v4 已将 tooltip 配置移至 plugins.tooltip 下，不再支持顶级的 tooltips 字段
2. 第三方 labels 插件可能与当前版本不兼容，建议使用官方插件或原生配置

有效配置代码 #

polarOptions() {
  return {
    plugins: {
      // 配置鼠标悬浮提示框（tooltip）显示百分比
      tooltip: {
        callbacks: {
          label: (context) => {
            // 从上下文获取原始径向数值，转换为百分比
            const percentage = (context.parsed.r * 100).toFixed(1);
            return `${percentage}%`;
          }
        }
      },
      // 若需要在扇区上直接显示百分比，需先安装官方插件：npm install chartjs-plugin-datalabels
      datalabels: {
        formatter: (value) => {
          return `${(value * 100).toFixed(1)}%`;
        },
        color: '#ffffff' // 自定义文字颜色
      }
    },
    scales: {
      r: {
        ticks: {
          // 格式化径向刻度为百分比
          callback: (value) => {
            return `${(value * 100).toFixed(0)}%`;
          }
        }
      }
    }
  };
}

额外说明 #

• 若使用 datalabels 插件，需在组件中注册：

import { Chart, registerables } from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';

// 注册必要组件和数据标签插件
Chart.register(...registerables, ChartDataLabels);

• 确保你的原始数据是小数形式（如0.957），如果数据本身已是百分比数值（如95.7），去掉配置中的 * 100 即可。

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