在我的 ReactJS App 的新任務中實現 ChartJS 的問題，請讓我知道我錯在哪里

Question

我想在我的反應應用程序中上傳一個圖表，但是當我使用這個 Barchar.jsx 組件（使用 js 沒有任何改變）時，它在控制台中顯示以下錯誤（在圖像中。）

import React from "react";
import { Bar, Chart } from "react-chartjs-2";
import {Chart as ChartJS, BarElement } from 'chart.js';

ChartJS.register(BarElement)

const BarChart = () => {

    var data = {
        labels: ['RCB', 'MI', 'RR', 'SRH', 'CSK', 'KXIP', 'DD', 'DCH', 'GL', 'RPS', 'KKR'],
        datasets: [{
            label: '# of toss wins',
            data: [70, 85, 63, 35, 66, 68, 72, 43, 15, 6, 78],
            backgroungColor: ['red', 'lightblue', 'pink', 'orange', 'yellow', 'gold', 'blue', 'black', 'gold', 'voilet', 'purple' ],
            borderWidth: 1
        }]
    };

    var options = {
        maintainAspectRatio: false,
        scales: {
            y:{
                beginAtZero: true
            }
        },        
    };

    return (
        <div>
            <Bar
            
                data= {data} 
                height={400}
                width={600}
                options={options}
            />
        </div>
    )

};

export default BarChart ;

Answer 1

這是因為您嘗試使用 treeshaking 但僅導入和注冊 bar 的元素，而 chart.js 需要更多。

為了便於使用，你最好改變

import {Chart as ChartJS, BarElement } from 'chart.js';

ChartJS.register(BarElement)

進入：

import 'chart.js/auto'

如果您真的想使用 treeshaking，您應該查看文檔並導入並注冊您正在使用的所有內容： https ://www.chartjs.org/docs/3.7.1/getting-started/integration.html#bundlers-webpack- 匯總等

Answer 2

SO BASSICALLY MISTAKE WHICH I DID WAS I DIDN'T IMPORT  THIS BARCHART IN APPJS.CORRECT CCODE WILL BE LIKE THIS (FOR BARCHART.JSX) YOU CAN CHANGE IN IT MANY THINGS.



import React from "react";
import { Bar } from "react-chartjs-2";
import 'chart.js/auto'


const BarChart =() => {
    return <div>
        <Bar 
            options={{
                
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }}
            data ={{
                labels: ['RCB', 'MI', 'RR', 'SRH', 'CSK', 'KXIP', 'DD', 'DCH', 'GL', 'RPS', 'KKR'],
                datasets: [{
                    label: '# of  toss wins',
                    data: [70, 85, 63, 35, 66, 68, 72, 43, 15, 6, 78],
                    backgroundColor: ['red', 'Blue', '#ff64dc', '#fc7404', 'yellow', 'red', '#000080', 'silver', 'gold', '#9400d3', 'purple' ],
                    borderColor:['black'],
                    borderWidth: 1
                },
                {
                label: '# of match wins',
                data: [73, 92, 63, 42, 79, 70, 62, 29, 13, 10, 77],
                backgroundColor: ['#C9920E', 'Blue', '#ff64dc', '#fc7404', 'yellow', 'lightgrey', '#000080', 'silver', 'gold', '#9400d3', 'purple' ],
                borderColor:['black'],
                borderWidth: 1
                }
            ]
                
            }}

        /></div>
};  

export default BarChart ;