ChartJS 型别'IntrinsicAttributes'上没有属性'property'

7kjnsjlb  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(175)

我是React Typescript的初学者,目前正在学习如何在React Typescript应用中使用Chart.js实现一个条形图,所以我只想将属性datasets:的值作为props传递给BarChart.tsx组件。
下面是我的BarChart.tsx组件:

import Chart from 'chart.js/auto';
import { Line } from 'react-chartjs-2';
import 'chartjs-adapter-luxon';
import StreamingPlugin from 'chartjs-plugin-streaming';

Chart.register(StreamingPlugin);

interface ChartProperty {
  label: string;
  backgroundColor: string;
  borderColor: string;
  borderDash?: number[];
  cubicInterpolationMode?: string;
  fill: boolean;
  data: [];
}

interface Props {
  property: ChartProperty[];
}

const BarChart: React.FC<Props> = ({property}) => {
  return (
    <div>
      <Line
        data={{
          datasets: property,
        }}
        height={100}
        width={400}
        options={{
          scales: {
            x: {
              type: 'realtime',
              realtime: {
                delay: 2000,
                onRefresh: (chart) => {
                  chart.data.datasets.forEach((dataset) => {
                    dataset.data.push({
                      x: Date.now(),
                      y: Math.random(),
                    });
                  });
                },
              },
            },
          },
        }}
      />
    </div>
  );
};

export default BarChart;

下面是我的App.tsx组件:

import './App.css';
import BarChart from './components/BarChart';

const ChartProperty = [
  {
    label: 'Dataset 1',
    backgroundColor: 'rgba(255, 99, 132, 0.5)',
    borderColor: 'rgb(255, 99, 132)',
    borderDash: [8, 4],
    fill: false,
    data: [],
  },
  {
    label: 'Dataset 2',
    backgroundColor: 'rgba(54, 162, 235, 0.5)',
    borderColor: 'rgb(54, 162, 235)',
    cubicInterpolationMode: 'monotone',
    fill: false,
    data: [],
  },
];

const App = () => {
  return (
    <div>
      <h1 style={{ textAlign: 'center' }}>Sample Bar Chart</h1>
      <BarChart property={ChartProperty} />
    </div>
  );
};

export default App;

但是当我在这里尝试这个的时候,我在<BarChart property={ChartProperty} />中得到了一个错误,这个错误名为property,我得到的是:

TS2322: Type '{ property: ({ label: string; backgroundColor: string; borderColor: string; borderDash: number[]; fill: boolean; data: never[]; cubicInterpolationMode?: undefined; } | { label: string; backgroundColor: string; ... 4 more ...; borderDash?: undefined; })[]; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'property' does not exist on type 'IntrinsicAttributes'.
    25 |     <div>
    26 |       <h1 style={{ textAlign: 'center' }}>Sample Bar Chart</h1>        
  > 27 |       <BarChart property={ChartProperty} />
       |                 ^^^^^^^^
    28 |     </div>
    29 |   );
    30 | };

在这种情况下,有人能帮助我吗?如果有人能指出我的错误,我真的很感激。提前谢谢你。

ie3xauqp

ie3xauqp1#

你不能这样写:data: [];。正确答案:data: any[]

相关问题