星期三 , 22 1 月 2025

WP开发教程 WordPress导师在线教程

chart.js用法

wptutor 2024-07-25 chart.js用法已关闭评论 44 Views

<!DOCTYPE html>
<html>
<head>
    <title>Gender Distribution</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="genderChart" width="400" height="400"></canvas>
    <script>
        var ctx = document.getElementById('genderChart').getContext('2d');
        var genderChart = new Chart(ctx, {
            type: 'pie',
            data: {
                labels: ['Male', 'Female'],
                datasets: [{
                    data: [<?php echo $malePercentage; ?>, <?php echo $femalePercentage; ?>],
                    backgroundColor: ['#36A2EB', '#FF6384'],
                    hoverBackgroundColor: ['#36A2EB', '#FF6384']
                }]
            },
            options: {
                responsive: true,
                title: {
                    display: true,
                    text: 'Male and Female Percentage'
                }
            }
        });
    </script>
</body>
</html>

注意先加载js， cdn和下载下来都可以。