Laravel和jQuery：构建自定义的数据可视化和图表展示

<!-- 通过CDN引入jQuery -->
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

<!-- 或者下载本地文件引入 -->
<!-- <script src="/path/to/jquery.min.js"></script> -->

<!-- 图表容器 -->
<div id="chart-container">
    <canvas id="chart"></canvas>
</div>

// public/js/app.js

$(document).ready(function() {
    // 模拟数据
    var data = {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'Sales',
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1,
            data: [65, 59, 80, 81, 56, 55, 40],
        }]
    };

    // 绘制柱状图
    var ctx = document.getElementById('chart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: data,
    });
});

<!-- 图表容器 -->
<div id="radar-chart-container">
    <canvas id="radar-chart"></canvas>
</div>

// public/js/app.js

$(document).ready(function() {
    // 模拟数据
    var data = {
        labels: ['Math', 'Science', 'History', 'English', 'Art'],
        datasets: [{
            label: 'Score',
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255, 99, 132, 1)',
            pointBackgroundColor: 'rgba(255, 99, 132, 1)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgba(255, 99, 132, 1)',
            data: [90, 70, 85, 80, 95],
        }]
    };

    // 绘制雷达图
    var ctx = document.getElementById('radar-chart').getContext('2d');
    var myRadarChart = new Chart(ctx, {
        type: 'radar',
        data: data,
    });
});