设置组件属性的类型

Question

我一直在找ts error #2741 (Property 'datasets' is missing in type)。

​

在我的一生中，我不知道如何为data组件的<Bar />属性设置类型。我已经尝试过data: string[]内联和许多其他变体。

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

import './Chart.css';

export default function Chart() {
  return (
    <div className="data">
      Chart
      <Bar
        data={{
          labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']
        }}
        height={400}
        width={400}
        options={{
          maintainAspectRatio: false
        }}
      />
    </div>
  )
}

​

Answer 1

datasets是data类型所需的属性。在您的示例中，您只提供了labels属性，因此类型记录将引发该错误。

一个有效的数据对象应该如下所示：

data: {
    datasets: [{
      data: [20, 10],
    }],
    labels: ['a', 'b']
}

从chartjs文档：

https://www.chartjs.org/docs/latest/general/data-structures.html

Answer 2

您需要修复您要给您的Bar组件数据的数据--应该像图表JS文档中建议的那样

data: {
 datasets: [{
   data: [20, 10],
 }],
 labels: ['a', 'b']
}

注意:当数据是一个数字数组时，来自相同索引的标签数组的值用于索引轴(x表示垂直，y用于横图)。