ChartJS 未捕获的类型错误：无法从我的SQL查询中读取未定义(读取"CountOf")的属性

z9zf31ra 于 2023-01-05 发布在 Chart.js

关注(0)|答案(1)|浏览(141)

我在数据库中有一个表，它的情感字段可以存储人脸的最大7种情感“愤怒”，“厌恶”，“恐惧”，“快乐”，“中性”，“悲伤”，我想通过我的sql查询创建一个图表，我想统计具有相同userid的情感数量，并在chartjs中显示。并且在成功获得通过 AJAX 调用返回的数据之后，只有当所有情绪都存储在表中时，我才能够创建图表，例如，如果没有恐惧情绪的条目，我会得到这个错误，我怎样才能避免这个错误的情绪没有入口。

`function generategraph(angry,disgusted,fearful,happy,neutral,sad,surprised){
        if(myChart!=null)
        {
            myChart.destroy();
        }
            myChart = new Chart (ctx, {
                type: 'bar',
                data: {
                    labels: ['Angry', 'Disgusted', 'Fearful', 'Happy', 'Neutral', 'Sad', 'Surprised'],
                    datasets: [{
                        label: '# of Votes',
                        data: [angry, disgusted, fearful, happy, neutral, sad, surprised],
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
    }`

上面是我的图表函数，其中我传递了7种情绪作为变量
下面是我 AJAX 返回的数据

0
: 
{emotion_state: 'angry', CountOf: '34'}
1
: 
{emotion_state: 'disgusted', CountOf: '11'}
2
: 
{emotion_state: 'happy', CountOf: '35'}
3
: 
{emotion_state: 'neutral', CountOf: '337'}
4
: 
{emotion_state: 'sad', CountOf: '54'}
5
: 
{emotion_state: 'surprised', CountOf: '61'}
length
: 
6
[[Prototype]]
: 
Array(0)

下面是调用函数的代码

if(this.readyState === 4 && this.status === 200) {
        var data = JSON.parse(this.responseText);
        console.log(data);
        // Inserting the response from server into an HTML element
        generategraph(data[0].CountOf,data[1].CountOf,data[2].CountOf,data[3].CountOf,data[4].CountOf,data[5].CountOf,data[6].CountOf)

我是否需要从 AJAX 请求和比较或设置为默认0，如果没有countof数组？如果是，请指导一点点，因为我是新的谢谢
我需要显示所有的情绪计数，即使它是零，它是如何可能的，如果情绪计数是零，因为如果我选择唯一的值，通过我的sql查询，它将使计数和返回的情绪，这是在数据库中可用。

chart.js

来源：https://stackoverflow.com/questions/75005861/uncaught-typeerror-cannot-read-properties-of-undefined-reading-countof-from

1条答案

按热度按时间

e1xvtsh31#

代替发送每个计数到函数和硬编码图表中的情绪列表，你可以尝试做以下事情
创建包含所有可能情感的对象，初始默认值为0。

const emotions = {
    angry: 0,
    disgusted: 0,
    fearful: 0,
    happy: 0,
    neutral: 0,
    sad: 0,
    surprised: 0
}

你从 AJAX 得到的响应看起来是这样的

const response = [
    {emotion_state: 'angry', CountOf: '34'},
    {emotion_state: 'disgusted', CountOf: '3'},
    {emotion_state: 'fearful', CountOf: 0},
    .
    .
]

在 AJAX 响应之后，你可以用如下的计数更新你的emotions对象

for (const item of response) {
    if (emotions.hasOwnProperty(item.emotion_state)) {
        emotions[item.emotion_state] = item.CountOf
    }
}

然后将其传递给图形函数，如下所示

generategraph(Object.entries(emotions))

然后更新函数来处理输入

function generategraph(input){
        if(myChart!=null)
        {
            myChart.destroy();
        }
            myChart = new Chart (ctx, {
                type: 'bar',
                data: {
                    labels: input.map(i => i[0].charAt(0).toUpperCase() + i[0].slice(1)),
                    datasets: [{
                        label: '# of Votes',
                        data: input.map(i => i[1]),
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
    }

赞(0）回复(0）举报 2023-01-05

我来回答

ChartJS 未捕获的类型错误：无法从我的SQL查询中读取未定义(读取"CountOf")的属性

1条答案

相关问题

热门标签

最新问答