Chart.js在使用函数填充数据时引发错误

t1rydlwq  于 2022-12-13  发布在  Chart.js
关注(0)|答案(1)|浏览(167)

我正在使用Chart.js和react-chartjs-2向React应用程序添加图表。
我尝试将数据加载到图表中,如下所示:

<Chart type="line" data={this.getData}/>

getData是一个简单的函数,它将组件属性中的数据转换为Chart.js理解的格式:

function getData() {
    const data = this.props.data;
    [...]
    return {
        labels: dates // This is an array of dates as strings, ex ["2022-11-14", ...]
        datasets: [{ label: "Some Label", data: sales}] // sales is an array of numbers
    }
}

但是,当我加载图表时,出现以下错误:

TypeError: t is undefined

如果我将数据硬编码到组件中,此错误就会消失,例如:

<Chart type="line" data={{
    labels: ["one", "two", "three"]
    datasets: [{ label: "Some Label", data: [1,2,3]}]
}}/>

因此,尽管getData()返回数据的方式与硬编码的方式完全相同,但如果我使用getData()而不是硬编码图表数据,就会引发该错误。

n53p2ov0

n53p2ov01#

您正在调用data内的函数,因此添加缺少的括号

<Chart type="line" data={this.getData()}/>

相关问题