条形图无法识别 react-chartjs-2 选项答案

【问题标题】：react-chartjs-2 options are not recognized for Bars条形图无法识别 react-chartjs-2 选项
【发布时间】：2022-07-18 01:58:08
【问题描述】：

我正在尝试通过“react-chartjs-2”构建一个条形图组件。我几乎从这里粘贴了我的代码：https://www.c-sharpcorner.com/article/create-different-charts-in-react-using-chart-js-library/。看起来是这样的：

import React from 'react';
import {Bar} from "react-chartjs-2";

const BarChart = () => {
    const barChartData = {
      labels: ["October", "November", "December"],
      datasets: [
        {
          data: [8137119, 9431691, 10266674],
          label: "Infected People",
          borderColor: "#3333ff",
          backgroundColor: "#547db4",
          fill: true
        },
        {
          data: [1216410, 1371390, 1477380],
          label: "Deaths People",
          borderColor: "#ff3333",
          backgroundColor: "#f7813e",
          fill: true
        }
      ]
    };
  
    const barChart = (
      <Bar
        type="bar"
        width={130}
        height={50}
        options={{
          title: {
            display: true,
            text: "COVID-19 Cases of Last 3 Months",
            fontSize: 15
          },
          legend: {
            display: true, //Is the legend shown?
            position: "bottom" //Position of the legend.
          }
        }}
        data={barChartData}
      />
    );
    return barChart;
  };

export default BarChart

一切似乎都运行良好，除了代码无法识别选项道具这一事实。有没有人遇到过类似的问题并可以帮助我？

【问题讨论】：

标签： reactjs react-chartjs react-chartjs-2

【解决方案1】：

如下所示更新 options 属性。

options = {{
        plugins: {
            title: {
              display: true,
              text: "COVID-19 Cases of Last 3 Months"
            },
           legend: { 
              display: true, 
              position: "bottom"
            }
        }      
    }}

【讨论】：