React中Chart.js 2环形图的图例调整及自定义需求求助

1. 把图例移到底部 #

你之前的错误是将legend配置写在了datasets对象内部，Chart.js的图例配置属于全局options范畴，并非数据集的属性。正确操作如下：

定义单独的options对象，配置图例位置：

const options = {
  legend: {
    position: 'bottom', // 将图例固定在底部
    labels: {
      padding: 20 // 可选，调整标签间的间距
    }
  }
};

然后将options传给<Doughnut>组件：

<Doughnut data={data} options={options} />

2. 缩小环形图的厚度 #

环形图的厚度由数据集的cutout属性控制，值可以是百分比（推荐）或像素值，数值越大，环形越薄。直接在datasets中添加该属性即可：

datasets: [
  {
    // ... 其他原有配置
    cutout: '80%', // 示例值，可根据需求调整
  }
]

3. 在环形中心添加文本 #

Chart.js没有内置的中心文本功能，需要通过自定义插件实现。我们可以注册一个afterDraw钩子的插件，在图表绘制完成后手动绘制文本：

// 自定义中心文本插件
const centerTextPlugin = {
  id: 'centerText',
  afterDraw: (chart) => {
    const ctx = chart.ctx;
    // 计算图表中心坐标
    const centerX = chart.chartArea.left + (chart.chartArea.width / 2);
    const centerY = chart.chartArea.top + (chart.chartArea.height / 2);
    
    // 可选：动态计算数据总和作为中心文本
    const total = chart.data.datasets[0].data.reduce((sum, val) => sum + val, 0);
    
    ctx.save();
    ctx.font = 'bold 20px Arial'; // 自定义字体样式
    ctx.fillStyle = '#333'; // 文本颜色
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(`总计: ${total}`, centerX, centerY); // 绘制文本
    ctx.restore();
  }
};

记得注册这个插件到ChartJS：

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

完整代码示例 #

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

// 自定义中心文本插件
const centerTextPlugin = {
  id: 'centerText',
  afterDraw: (chart) => {
    const ctx = chart.ctx;
    const centerX = chart.chartArea.left + (chart.chartArea.width / 2);
    const centerY = chart.chartArea.top + (chart.chartArea.height / 2);
    
    const total = chart.data.datasets[0].data.reduce((sum, val) => sum + val, 0);
    
    ctx.save();
    ctx.font = 'bold 20px Arial';
    ctx.fillStyle = '#333';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(`总计: ${total}`, centerX, centerY);
    ctx.restore();
  }
};

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

export const data = {
  labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
  datasets: [
    {
      label: "# of Votes",
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        "rgba(255, 99, 132, 0.2)",
        "rgba(54, 162, 235, 0.2)",
        "rgba(255, 206, 86, 0.2)",
        "rgba(75, 192, 192, 0.2)",
        "rgba(153, 102, 255, 0.2)",
        "rgba(255, 159, 64, 0.2)",
      ],
      borderColor: [
        "rgba(255, 99, 132, 1)",
        "rgba(54, 162, 235, 1)",
        "rgba(255, 206, 86, 1)",
        "rgba(75, 192, 192, 1)",
        "rgba(153, 102, 255, 1)",
        "rgba(255, 159, 64, 1)",
      ],
      borderWidth: 1,
      cutout: "80%", // 调整环形厚度
    },
  ],
};

const options = {
  legend: {
    position: "bottom", // 图例移至底部
    labels: {
      padding: 20,
    },
  },
};

export function App() {
  return <Doughnut data={data} options={options} />;
}

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