如何修改Chart.js绘制的饼图内部数值的字体大小与颜色？

当然可以修改，分两种常见场景来实现：

一、修改扇区内部的数值标签样式 #

如果你的饼图扇区上显示了数值（比如每个扇形对应的百分比或数值），通常是用chartjs-plugin-datalabels插件实现的，直接在插件配置里修改字体属性即可：

const myPieChart = new Chart(document.getElementById('pieChart'), {
  type: 'pie',
  data: {
    labels: ['A类', 'B类', 'C类'],
    datasets: [{
      data: [40, 35, 25],
      backgroundColor: ['#ff4d4f', '#52c41a', '#1890ff']
    }]
  },
  plugins: [ChartDataLabels],
  options: {
    plugins: {
      datalabels: {
        // 控制字体大小、粗细、字体族
        font: {
          size: 14,
          weight: 'bold',
          family: 'Microsoft YaHei'
        },
        // 控制字体颜色
        color: '#fff',
        // 数值位置调整（可选）
        anchor: 'center',
        align: 'center'
      }
    }
  }
});

二、修改饼图中心的汇总数值样式 #

如果是饼图中心显示的总数值或汇总文本，需要通过自定义插件来控制样式：

// 自定义中心文本插件
const centerTextPlugin = {
  id: 'centerText',
  afterDatasetsDraw(chart) {
    const ctx = chart.ctx;
    ctx.save();
    // 获取饼图中心坐标
    const centerX = chart.chartArea.left + chart.chartArea.width / 2;
    const centerY = chart.chartArea.top + chart.chartArea.height / 2;
    
    // 设置字体样式：大小、粗细、字体族
    ctx.font = 'bold 22px Microsoft YaHei';
    // 设置字体颜色
    ctx.fillStyle = '#333';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    // 计算并绘制总数值
    const total = chart.data.datasets[0].data.reduce((sum, val) => sum + val, 0);
    ctx.fillText(total, centerX, centerY);
    ctx.restore();
  }
};

// 初始化饼图
const myPieChart = new Chart(document.getElementById('pieChart'), {
  type: 'pie',
  data: {
    labels: ['A类', 'B类', 'C类'],
    datasets: [{
      data: [40, 35, 25],
      backgroundColor: ['#ff4d4f', '#52c41a', '#1890ff']
    }]
  },
  plugins: [centerTextPlugin]
});

关键配置说明 #

• 扇区数值：通过datalabels.font.size调整大小，datalabels.color设置颜色，还能自定义字体粗细、字体族
• 中心数值：通过ctx.font定义字体的大小、样式和字体族，ctx.fillStyle设置文本颜色

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