HTML5 图形和数据可视化秘籍

作者：System 时间：2024年08月16日分类：所有,html5 字数：1246




<!DOCTYPE html>
<html>
<head>
    <title>HTML5 图形和数据可视化秘籍（二）</title>
    <meta charset="utf-8">
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <h1>圆形图例</h1>
    <canvas id="pieChart" width="400" height="400"></canvas>
    <script>
        // 获取 canvas 元素并设置上下文
        var canvas = document.getElementById('pieChart');
        var ctx = canvas.getContext('2d');
 
        // 定义图表数据
        var data = {
            labels: ['红色', '蓝色', '黄色'],
            datasets: [
                {
                    data: [300, 50, 100],
                    backgroundColor: [
                        'rgb(255, 99, 132)',
                        'rgb(54, 162, 235)',
                        'rgb(255, 205, 86)'
                    ]
                }
            ]
        };
 
        // 创建图表
        var myPieChart = new Chart(ctx, {
            type: 'pie',
            data: data,
            options: {
                responsive: false
            }
        });
    </script>
</body>
</html>

这段代码使用了Chart.js库来创建一个简单的饼图。首先，我们定义了一个包含标签和数据集的数据对象。然后，我们使用Chart.js的Chart构造函数创建了一个饼图实例，并将其渲染到canvas元素上。这个例子展示了如何使用HTML5的<canvas>元素和JavaScript库Chart.js来创建图形和可视化数据。

HTML5 图形和数据可视化秘籍

评论已关闭

推荐阅读