React Chart.JS 无法设置标题或移动图例（TypeScript）答案

【问题标题】：React Chart.JS cant set title or move legend (TypeScript)React Chart.JS 无法设置标题或移动图例（TypeScript）
【发布时间】：2022-08-11 17:22:12
【问题描述】：

我有一个包含这些数据的圆环图组件：

  const data = {
    labels: [\"1\", \"2\"],
    datasets: [
      {
        label: \"peers\",
        data: [1, 2],
        backgroundColor: [\"#56E2CF\", \"#56AEE2\"]
      }
    ]
  };

数据工作正常。这些是选项：

  const options = {
    legend: {
      display: \"right\"
    },
    title: {
      text: \"Title\"
    }
  };

组件甜甜圈：

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

但图表仍然没有标题，图例仍在顶部：

我尝试使用插件将选项放在 chart.js 样式中：

  const options = {
    plugins: {
      legend: {
        position: \"right\"
      },
      title: {
        display: true,
        text: \"Title\"
      }
    }
  };

图例移动了，但我得到一个类型错误（仍然没有标题）：The types of \'plugins.legend.position\' are incompatible between these types. Type \'string\' is not assignable to type \'\"right\" | \"left\" | \"top\" | \"bottom\" | \"center\" | \"chartArea\" | _DeepPartialObject<{ [scaleId: string]: number; }> | undefined\'

注意标题是如何向右移动的：

标签： reactjs typescript chart.js react-chartjs-2

【解决方案1】：

 const options = {
    plugins: {
      legend: {
        position: "right" as const
      },
      title: {
        display: true,
        text: "Title"
      }
    }
  };

【讨论】：