如何为SPFx React项目中PrimeReact柱状图添加红蓝色标签与数值标记？

我在SPFx React项目中使用PrimeReact Charts实现了水平柱状图，PrimeReact底层基于ChartJS。当前需要为柱状图中的柱子添加对应颜色的（红、蓝等）数值标记，现有代码如下：

import { Chart } from 'primereact';
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
ChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels);

<Chart type="bar" data={barChartData} options={barChartOptions} />

const barChartData = {
  labels: ["Excellent", "Very Good", "Good", "Average"],
  datasets: [
    {
      label: "Count",
      data: [40, 50, 30, 10],
      backgroundColor: ["#E74C3C", "#3498DB", "#F1C40F", "#27AE60"],
      borderColor: ["#E74C3C", "#3498DB", "#F1C40F", "#27AE60"],
      borderWidth: 1,
      borderRadius: 10,
      barPercentage: 0.5,
      barThickness: 6,
      maxBarThickness: 8,
    }
  ],
};

const barChartOptions = {
  indexAxis: "y",
  scales: {
    x: {
      beginAtZero: true,
      ticks: {
        display: false,
      },
      grid: {
        display: false,
        drawBorder: false
      }
    },
    y: {
      beginAtZero: true,
      grid: {
        display: false,
        drawBorder: false
      }
    }
  },
  plugins: {
    datalabels: {
      color: '#000',
      anchor: 'end',
      align: 'end',
      font: {
        weight: 'bold',
      }
    },
    tooltip: {
      callbacks: {
        label: function (context) {
          const dataset = context.dataset;
          const total = dataset.data.reduce((a, b) => a + b, 0);
          const value = dataset.data[context.dataIndex];
          const percentage = ((value / total) * 100).toFixed(2);
          return [`${context.label}: ${value} (${percentage}%)`];
        }
      }
    },
    legend: {
      display: false,
    },
  },
  layout: {
    padding: {
      right: 20,
    },
  },
  responsive: true,
  maintainAspectRatio: false,
  animation: { duration: 0 }
};

解决方案 #

要实现数值标记颜色与柱子对应，只需通过chartjs-plugin-datalabels的回调函数动态设置颜色，步骤如下：

1. 确保已安装依赖（如果未安装）：

npm install chartjs-plugin-datalabels

2. 修正插件导入与注册：

import { Chart } from 'primereact';
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
import ChartDataLabels from 'chartjs-plugin-datalabels'; // 显式导入插件

ChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels);

3. 修改barChartOptions中的datalabels配置，动态绑定数值颜色与柱子背景色：

plugins: {
  datalabels: {
    // 动态获取当前柱子的背景色作为数值标记颜色
    color: (context) => context.dataset.backgroundColor[context.dataIndex],
    anchor: 'end',
    align: 'end',
    font: {
      weight: 'bold',
    },
    // 自定义显示内容，若需同时显示类别标签和数值可修改为以下格式
    // formatter: (value, context) => `${context.chart.data.labels[context.dataIndex]}: ${value}`
  },
  // 其余tooltip、legend配置保持不变
}

修改后，红色柱子的数值标记会显示为红色，蓝色柱子的数值标记显示为蓝色，与柱子颜色一一对应，同时保持数值在柱子末端的显示位置。

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