如何使用nchart在饼图扇区上显示标签或百分比？

nchart的饼图/环形图默认不会自动渲染扇区标签，仅在数据项里添加label字段无效，必须在图表配置中手动开启标签显示的相关选项，具体操作如下：

1. 按需计算百分比 #

如果需要显示百分比，先将原始数值转换为百分比格式：

const colorArr = ["#29C5F6", "#D4CCC5", "#949FB1", "#ff0080", "#8A2BE2", "#3CB043", "#ED7014", "#FCAE1E"];
const valueArr = [50, 100, 40, 75, 25];
const total = valueArr.reduce((sum, val) => sum + val, 0);

const pieChartSectionArr = valueArr.map((val, index) => {
  const percentage = ((val / total) * 100).toFixed(1) + "%";
  return {
    value: val,
    color: colorArr[index],
    label: percentage // 也可改为"分类名: 百分比"的组合格式
  };
});

2. 配置标签显示选项 #

在nchart的配置对象中，需添加plugins相关配置启用标签渲染，以下是完整的环形图配置示例：

const chartConfig = {
  type: "doughnut",
  data: {
    datasets: [
      {
        data: pieChartSectionArr,
        innerRadius: "40%" // 控制环形图内圈大小
      }
    ]
  },
  options: {
    plugins: {
      datalabels: {
        display: true, // 强制开启标签显示
        color: "#000", // 标签文字颜色
        formatter: (_, ctx) => {
          // 读取数据项中预设的label值
          return ctx.dataset.data[ctx.dataIndex].label;
        },
        // 将标签定位在扇区外侧上方
        anchor: "end",
        align: "end",
        offset: 10 // 标签与扇区的间距
      }
    }
  }
};

关键注意事项 #

• 若复制官方示例仍看不到标签，说明示例完整配置中包含你遗漏的plugins标签设置，仔细检查示例代码的options部分。
• 部分版本的nchart需确保datalabels插件已启用，若遇报错请确认依赖完整性。
• 若想显示侧边图例而非扇区标签，可将datalabels配置替换为legend，设置display: true及对应position即可。

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