PHP および Vue.js の高度なヒント: 統計グラフを使用してデータの視覚化を強化する方法

$grades = [
    ['subject' => '数学', 'score' => 95],
    ['subject' => '英语', 'score' => 88],
    ['subject' => '物理', 'score' => 78],
    ['subject' => '化学', 'score' => 85],
    ['subject' => '生物', 'score' => 92],
];

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
    <canvas id="chart"></canvas>
</div>

<script>
new Vue({
    el: '#app',
    mounted() {
        this.renderChart();
    },
    methods: {
        renderChart() {
            let ctx = document.getElementById('chart').getContext('2d');
            let myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: this.getSubjectLabels(),
                    datasets: [{
                        label: '分数',
                        data: this.getScores(),
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    }
                }
            });
        },
        getSubjectLabels() {
            return <?php echo json_encode(array_column($grades, 'subject')); ?>;
        },
        getScores() {
            return <?php echo json_encode(array_column($grades, 'score')); ?>;
        }
    }
});
</script>