如何修改Chart.js柱状图数据标签的字体颜色为白色？

问题背景 #

我用Chart.js配合ng2-charts实现了一个柱状图，相关代码如下：

初始JavaScript配置 #

public chartOptions = {
  responsive: true,
  maintainAspectRatio: false,
  legend: {
    display: true,
    labels: {
      fontColor: "black",
      fontSize: 12,
    },
  },
  scales: {
    yAxes: [
      {
        display: true,
        stacked: false,
        scaleLabel: {
          display: true,
          labelString: "Number of Students",
        },
        ticks: {
          stepSize: 5,
          min: 0,
          max: 30,
          fontSize: 12,
          fontColor: "black",
        },
      },
    ],
    xAxes: [
      {
        display: true,
        stacked: false,
        ticks: {
          fontSize: 12,
          fontColor: "black",
          precision: 0,
        },
      },
    ],
  },
};

对应HTML代码 #

<canvas
  baseChart
  [datasets]="chartData"
  [labels]="chartLabels"
  [options]="chartOptions"
  [colors]="chartColors"
  [plugins]="[]"
  [legend]="true"
  [chartType]="'bar'"
  height="300px"
>
</canvas>

柱子上会自动显示数据标签，但我尝试修改配置将标签字体改为白色却没有效果。我曾在chartOptions中添加plugins.labels配置，修改后的代码如下，但依然无效：

chartOptions = {
  responsive: true,
  maintainAspectRatio: false,
  legend: {
    display: true,
  },
  scales: {
    yAxes: [
      {
        display: true,
        stacked: false,
        scaleLabel: {
          display: true,
          labelString: "Number of Students",
        },
        ticks: {
          stepSize: 5,
          min: 0,
          max: 30,
          fontSize: 12,
          fontColor: "black",
        },
      },
    ],
    xAxes: [
      {
        display: true,
        stacked: false,
        ticks: {
          fontSize: 12,
          fontColor: "black",
          precision: 0,
        },
      },
    ],
  },
  plugins: {
    labels: {
      fontColor: "white",
      fontSize: 12,
    },
  },
};

解决方法 #

1. 修正插件配置节点与属性名（核心问题） #

你之前的配置错误在于插件名称和属性名：如果使用的是chartjs-plugin-datalabels（Chart.js最常用的数据标签插件），正确的配置节点是plugins.datalabels，而非plugins.labels，且字体颜色的属性是color，不是fontColor。

修改后的chartOptions如下：

chartOptions = {
  responsive: true,
  maintainAspectRatio: false,
  legend: {
    display: true,
    labels: {
      fontColor: "black",
      fontSize: 12,
    },
  },
  scales: {
    yAxes: [
      {
        display: true,
        stacked: false,
        scaleLabel: {
          display: true,
          labelString: "Number of Students",
        },
        ticks: {
          stepSize: 5,
          min: 0,
          max: 30,
          fontSize: 12,
          fontColor: "black",
        },
      },
    ],
    xAxes: [
      {
        display: true,
        stacked: false,
        ticks: {
          fontSize: 12,
          fontColor: "black",
          precision: 0,
        },
      },
    ],
  },
  plugins: {
    datalabels: {
      color: 'white', // 正确的颜色属性
      font: {
        size: 12 // 字体大小配置在font对象下
      }
    }
  }
};

2. 确保插件正确加载 #

在HTML的baseChart组件中，[plugins]属性是空数组，需要将插件实例添加进去：

首先在组件文件中导入插件：

import ChartDataLabels from 'chartjs-plugin-datalabels';

然后修改HTML：

<canvas
  baseChart
  [datasets]="chartData"
  [labels]="chartLabels"
  [options]="chartOptions"
  [colors]="chartColors"
  [plugins]="[ChartDataLabels]" <!-- 加入插件实例 -->
  [legend]="true"
  [chartType]="'bar'"
  height="300px"
>
</canvas>

3. 数据集级别自定义样式（可选） #

如果需要给不同数据集设置不同的标签样式，可以直接在chartData的每个数据集中单独配置：

chartData = [
  {
    data: [12, 19, 3, 5, 2, 3],
    label: '数据集A',
    backgroundColor: '#42a5f5',
    datalabels: {
      color: 'white',
      font: {
        size: 12
      }
    }
  },
  {
    data: [2, 3, 20, 5, 1, 4],
    label: '数据集B',
    backgroundColor: '#66bb6a',
    datalabels: {
      color: '#fff',
      font: {
        size: 14
      }
    }
  }
];

总结 #

核心问题是混淆了数据标签插件的配置节点名称和属性名，修正配置后配合插件的正确加载，就能实现白色的柱子数据标签。

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