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

在初步了解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}, {$neutral}, {$disgust}, {$surprise}],
            backgroundColor: [
                'rgba(255, 99, 132, 0.5)',
                'rgba(54, 162, 235, 0.5)',
                'rgba(255, 206, 86, 0.5)',
                'rgba(75, 192, 192, 0.5)',
                'rgba(153, 102, 255, 0.5)',
                'rgba(255, 159, 64, 0.5)'
            ],
            borderColor: [

            ],
            borderWidth: 2
        }]
    },
    options: {
        // scales: {
        //     yAxes: [{
        //         ticks: {
        //             beginAtZero:true
        //         }
        //     }]
        // }
    }
});
</script>

控制器.php：

利用TP5.0控制器提供的select函数查询所需数据库数据，此处调用courseq(课程量化评估)方法时传入的$id参数为课程序号。

courseq.html: