创新实训——Chart.js通过TP5.0控制器与后台数据库交互

最新推荐文章于 2020-12-13 09:29:50 发布

qq_38530808

最新推荐文章于 2020-12-13 09:29:50 发布

阅读量313

点赞数

本文链接：https://blog.csdn.net/qq_38530808/article/details/80315645

版权

本文介绍了如何结合Chart.js和TP5.0框架，通过控制器从后台数据库获取数据，并展示在图表上。具体示例展示了学生在课堂的情感数据（如anger, disgust, sadness等），用于评估教学质量和学生参与度。" 9471015,1505345,使用Hibernate处理数据库特定函数group_concat的问题,"['java', 'hibernate方言', '数据库函数']

摘要由CSDN通过智能技术生成

在初步了解Char.js基本用法之后，今天将后台数据导入到了Chart.js图表中。

效果如下——

数据库：

效果：

说明：此图展示的数据是老师在某节课上的某一时刻系统通过人脸识别获取的学生总体感情数据，包括anger,disgust,sadness等等，以此来作为衡量老师教学水平和同学们上课的积极性。

js代码：

<script>

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ["anger", "sadness", "happiness", "neutral", "disgust", "surprise"],
        datasets: [{
            label: '# of Votes',
            data: [{$anger}, {$sadness}, {$happiness}, {