如何使用react-chartjs-2从处于状态的测试数据创建直方图？

Question

我正在尝试从react-chartjs-2的条形图创建直方图。我有一组测试数据，以及：间隔数，类间隔，标准差，范围和均值。我找不到资源概述将这些值中的每一个放置在何处以创建直方图。

如何将我的数据/计算结果反映在由修改后的chartjs条形图制成的直方图中？

有人知道我可以用来向正确的方向指出好的教程/资源吗？

const numberOfTestTakers = (arr) => {
            return arr.length
        }

        const findRange = (arr) => {
            let sortedArr = arr.sort()
            console.log('sortedArr', sortedArr)
            let min = sortedArr[0]
            console.log('min', min)
            let max = sortedArr[sortedArr.length - 1]
            console.log('max', max)
            let range = max - min
            return range
        }

        const getNumberOfIntervals = (num) => {
            let squareRoot = Math.sqrt(numberOfTestTakers)
            let intervals = Math.round(squareRoot)
            return intervals
        }

        const findMean = (arr) => {
            let sum = 0
            for (let i = 0; i < arr.length; i++) {
                sum += arr[i]
            }
            console.log('sum', sum)
            let mean = sum / arr.length
            return mean

        }

        const standardDeviation = (arr) => {
            let diffArr = []
            for (let i = 0; i < arr.length; i++) {
                diffArr.push(Math.pow(arr[i] - (findMean(arr)), 2))
            }
            return Math.sqrt(findMean(diffArr))

        }

        const getClassIntervals = (arr) => {
            const intervalWidth = standardDeviation(arr) / 3
            return intervalWidth
        }

        const getScoreFrequency = (arr) => {
            return arr.reduce(function (acc, curr) {
                if (typeof acc[curr] == 'undefined') {
                    acc[curr] = 1;
                } else {
                    acc[curr] += 1;
                }

                return acc;
            }, {});
        }


        const chartData = {
            data: {
            labels: [???],
            datasets: [{
                label: 'Scores',
                data: ???,
                backgroundColor: 'rgba(255, 99, 132, 1)',
            }],
        borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
        ],
            borderWidth: 1
    }
}
options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}

        return (
            <div className="App" >
                <header className="App-header">
                    <h1>Student Results Chart</h1>
                    <p>Number of Test Takers: {numberOfTestTakers(this.props.studentScores)}</p>
                    <p>Score Range: {findRange(this.props.studentScores)} points</p>
                    <p>Standard Deviation: {standardDeviation(this.props.studentScores)}</p>
                    <p>Interval Width: {getClassIntervals(this.props.studentScores)}</p>
                </header>
                <article className="canvas-container">
                    <Bar data={data} />
                </article>
            </div >
        );
    }
}