html 图表

作者：ˉ吻干迩的'泪发布日期:2025-12-12 浏览:45

<!DOCTYPE html>
<html>
<head>
    <title>HTML 图表示例</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <h2>使用 Chart.js 创建图表</h2>
    <canvas id="myChart" width="400" height="400"></canvas>
    <script>
        // 获取 canvas 元素的上下文
        const ctx = document.getElementById('myChart').getContext('2d');

        // 创建一个图表实例
        new Chart(ctx, {
            type: 'bar', // 指定图表类型为柱状图
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], // X 轴标签
                datasets: [{
                    label: '# of Votes', // 数据集名称
                    data: [12, 19, 3, 5, 2, 3], // 数据值
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ], // 颜色设置
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1 // 边框宽度
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true // Y 轴从 0 开始
                    }
                }
            }
        });
    </script>
</body>
</html>

解释说明：

HTML 结构：页面包含一个标题 (<h2>) 和一个 <canvas> 元素，用于绘制图表。
Chart.js 库：通过 <script> 标签引入了 Chart.js 库，这是一个流行的 JavaScript 图表库。
JavaScript 部分：
- 使用 document.getElementById 获取 <canvas> 元素的上下文。
- 使用 new Chart() 创建一个新的图表实例，并传入配置参数。
- type 设置为 'bar' 表示创建柱状图。
- data 包含图表的数据和标签。
- options 用于自定义图表的行为，例如是否从 0 开始绘制 Y 轴。

这个示例展示了如何使用 HTML 和 Chart.js 创建一个简单的柱状图。

上一篇：html特效

下一篇：html单选按钮控件标签