菜鸟教程在线编辑器

 
                <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
</head>
<body>
    <div style="width: 600px; height: 400px;">
        <canvas id="myChart"></canvas>
    </div>

    <script>
        // 获取 canvas 元素
        const ctx = document.getElementById('myChart').getContext('2d');
        
        // 创建图表
        const myChart = new Chart(ctx, {
            type: 'bar', // 图表类型
            data: {
                labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
                datasets: [{
                    label: '月度销售额',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: 'rgba(54, 162, 235, 0.5)'
                }]
            },
            options: {
                responsive: true, // 响应式设计
                scales: {
                    y: {
                        beginAtZero: true // y轴从0开始
                    }
                }
            }
        });
    </script>
</body>
</html>
              