javascript react-chartjs-2在 typescript 中不起作用

2skhul33  于 2022-12-17  发布在  Java
关注(0)|答案(1)|浏览(168)

我尝试使用chartjs和react-chartjs-2创建一个条形图,图表组件在javascript react中工作,但现在我需要在typescript中使用它,它返回了一个错误:

TypeError: Comp is not a function

这是条组件:

import { Chart as ChartJS} from 'chart.js/auto';
import { Bar } from 'react-chartjs-2';

export default function BarChart({product_data}:any) {

    const bar_data = {
        labels: ["Positive Reviews", "Neutral Reviews", "Negative Reviews"],
        datasets: [{
            label: "Number of reviews",
            data: [product_data.pos_count,product_data.neut_count,product_data.neg_count],
            backgroundColor: [
                'rgba(75, 192, 192, 0.2)',
                'rgba(255, 206, 86, 0.2)',
              'rgba(255, 99, 132, 0.2)'
            ],
            borderColor: [
                'rgba(75, 192, 192, 1)',
                'rgba(255, 206, 86, 1)',
              'rgba(255, 99, 132, 1)'
            ],
            borderWidth: 0.5,
        }]
    }
   

  return (
      <Bar  data={bar_data} />
  )
}

我安装了@types/chart.js和@types/react-chartjs-2,但仍然无法工作,有人能帮我吗?谢谢

gz5pxeao

gz5pxeao1#

Chart.js附带了内置类型,所以您需要卸载这两个类型包,然后它才能正常工作。
https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAcgMYAsCGsB0ArAzgejQFcYIEBuAWAChRJY4AlAUzSXgDMoIREpX2FGnWjwA3nABCGOAF84XHnwEwAtKgww8qgExDqNGswAe9eABNmHYgBtORAHbtgEB1IwBhdLAAUYsNzmROwA+uZoMGiyAFxoDgCeAJRwYobUcBlwSK648ABGGGERaHAAvCk0mVVwNmh5zDa40XAA2gBEAAoQuMAwwABuzEzM-cDMAO64bQA0cG0AcswkUGg2w6MTU7MLzADmEQNDLBuTbQC605XVGeGRuMwwTa2p6dfVtfU2zQtEIPVQcAgHDg-BOWyub0ytzQzRaAQgQVC0MwkFwIWyjhg03hiJgRUimAcSzxGIcWJxwTxyKJu3REExFwhkLgBSQAGtdtxHOYPBAbNBYUzmZkEFBdgUfAB2ACsswAjABOHTypWzAAMmB0iQQl1ewqqovFaB8OmlsrgOjVADZZgAOG1wDVanVC5mGiWm80KhXygDMysdmu1ruujL1zLy0EsUF5-KggvD+r4Rql5sVAfT8u1uqTBrFHrNs0tDvtWZdibd+eNntm3r9GeDFdDOf1kag0YA6sBzDAUM0NbKQ3IzkzZBC0hl+DAiFA3D5XQAeaQAuDQ0piApQfFROD4AB8V0SNFkQA

相关问题