jquery 圆环

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。圆环通常指的是一种图形元素，常见于数据可视化中，用于表示数据的百分比或部分与整体的关系。

类型

在 jQuery 中实现圆环图主要有以下几种方式：

使用 CSS3：通过 CSS3 的 border-radius 和 transform 属性来创建圆环效果。
使用 SVG：SVG 是一种基于 XML 的矢量图形格式，可以很容易地创建复杂的图形，包括圆环。
使用 Canvas：Canvas 是 HTML5 提供的一个绘图 API，可以用来绘制 2D 图形。

应用场景

圆环图常用于以下场景：

数据可视化：展示数据的百分比或部分与整体的关系。
进度条：显示任务的完成进度。
仪表盘：在仪表盘中显示各种指标。

示例代码

以下是一个使用 jQuery 和 SVG 创建圆环图的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 圆环图</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .donut {
            width: 200px;
            height: 200px;
        }
        .donut-circle {
            fill: none;
            stroke-width: 20;
            stroke-dasharray: 1, 283;
        }
        .donut-circle .donut-fill {
            stroke-dasharray: 200, 83;
            stroke: #4caf50;
        }
    </style>
</head>
<body>
    <svg class="donut">
        <circle class="donut-circle" cx="100" cy="100" r="80"></circle>
    </svg>

    <script>
        $(document).ready(function() {
            // 更新圆环图的填充百分比
            function updateDonut(percentage) {
                var circle = $('.donut-circle');
                var radius = circle.attr('r');
                var circumference = 2 * Math.PI * radius;
                var offset = circumference - (percentage / 100) * circumference;

                circle.find('.donut-fill').css('stroke-dasharray', percentage + ', ' + (100 - percentage));
                circle.find('.donut-fill').css('stroke-dashoffset', offset);
            }

            // 示例：更新圆环图为 75%
            updateDonut(75);
        });
    </script>
</body>
</html>