反应图表js，标题不显示

Question

我正在使用 React Chart JS 在我的组件中显示一个甜甜圈。

"chart.js": "^3.7.1",
"react-chartjs-2": "^4.1.0",

我无法显示标题：

const data = {
  labels: ["Score", "Total"],
  datasets: [
    {
      label: "Indice d'impact global de la transaction",
      data: [3.7, 5],
      backgroundColor: ["rgba(54, 162, 235, 0.2)", "rgba(128,128,128,0.2)"],
      borderColor: ["rgba(54, 162, 235, 1", "rgba(128,128,128,1)"],
      borderWidth: 1,
      lineTension: 0.5,
    },
  ],
};

<Doughnut
options={{
  plugins: {
    title: {
      display: true,
      text: "Indice d'impact global de la transaction",
      align: "center",
      padding: {
        top: 10,
        bottom: 30,
      },
    },
    legend: {
      display: true,
      position: "top",
    },
    scales: {
      y: {
        beginAtZero: true,
      },
    },
  },
}}
data={data}
/>

我怎样才能正确显示标题？

Answer 1

这是因为您正在使用 treeshaking 而不是导入和注册Title

要修复它，请导入并注册您正在使用的每个组件，可以在此处找到所有组件的列表，如下所示：

import {Chart, Title} from 'chart.js';
Chart.register(Title);

或者使用自动导入让 Chart.js 为您注册所有内容：

import 'chart.js/auto'