React-Chartjs-2：如何为环形图添加渐变色并调整标签位置？

翻译后的需求 #

我想要实现目标效果的环形图，目前已完成当前效果。希望为环形图添加渐变色，同时将图表上方的颜色说明标签（图例）移动到左侧。以下是我的代码：

const data = {
    datasets: [
      {
        data: [20, 30, 50],
        backgroundColor: ["#EB6262", "#39BDE7", "#0B8878"],
        borderWidth: 8,
        borderColor: theme.palette.white,
        hoverBorderColor: theme.palette.white,
      },
    ],
    labels: ["Pending", "In Process", "Completed"],
  };

<Doughnut data={data} />

1. 实现渐变色背景 #

Chart.js 不支持直接用颜色字符串定义渐变色，需要通过 Canvas 创建渐变对象。可以结合 useRef 和 useEffect 来获取图表上下文，生成对应渐变。

2. 调整图例到左侧 #

在图表配置的 options 中，通过 plugins.legend 配置项修改图例位置。

完整代码示例 #

import { Doughnut } from 'react-chartjs-2';
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
import { useRef, useEffect } from 'react';

// 注册Chart.js必需的组件
ChartJS.register(ArcElement, Tooltip, Legend);

// 假设你的theme对象已定义
const theme = { palette: { white: '#FFFFFF' } };

const GradientDoughnut = () => {
  const chartRef = useRef(null);
  const data = {
    datasets: [
      {
        data: [20, 30, 50],
        backgroundColor: [], // 预留位置填充渐变
        borderWidth: 8,
        borderColor: theme.palette.white,
        hoverBorderColor: theme.palette.white,
      },
    ],
    labels: ["Pending", "In Process", "Completed"],
  };

  // 配置图例位置到左侧
  const options = {
    plugins: {
      legend: {
        position: 'left',
        align: 'center', // 图例垂直居中
      },
    },
  };

  useEffect(() => {
    if (!chartRef.current) return;
    const chart = chartRef.current.chartInstance;
    const ctx = chart.ctx;

    // 创建三个线性渐变，对应三个数据项
    const pendingGradient = ctx.createLinearGradient(0, 0, 0, 400);
    pendingGradient.addColorStop(0, '#EB6262');
    pendingGradient.addColorStop(1, '#FF9A9A');

    const processGradient = ctx.createLinearGradient(0, 0, 0, 400);
    processGradient.addColorStop(0, '#39BDE7');
    processGradient.addColorStop(1, '#73D1F7');

    const completedGradient = ctx.createLinearGradient(0, 0, 0, 400);
    completedGradient.addColorStop(0, '#0B8878');
    completedGradient.addColorStop(1, '#1EB89F');

    // 更新数据集背景色并刷新图表
    chart.data.datasets[0].backgroundColor = [pendingGradient, processGradient, completedGradient];
    chart.update();
  }, []);

  return <Doughnut ref={chartRef} data={data} options={options} />;
};

export default GradientDoughnut;

关键说明 #

• 渐变方向可以通过 createLinearGradient(x0, y0, x1, y1) 的参数调整，比如改成水平渐变可以把参数设为 (0,0,400,0)
• 图例的样式还可以通过 plugins.legend.labels 进一步调整字体、间距等属性

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