核心是用document.createElementNS创建SVG元素并计算path路径：先设viewBox和圆心，再依数据比例算角度与弧度，用A指令绘制扇形，配合M L A Z命令生成闭合路径，最后动态添加带fill的path及text标签。
用 JavaScript DOM 操作动态生成 SVG 饼图，核心是计算每个扇形的起始角、终止角和路径坐标，再用 <path> 绘制，配合 document.createElementNS 创建 SVG 元素。
准备 SVG 容器与命名空间
SVG 元素必须在 SVG 命名空间下创建，不能用普通 document.createElement：
- 用
document.createElementNS('http://www.w3.org/2000/svg', 'svg')创建 SVG 根元素 - 设置宽高、viewBox 等属性（推荐 viewBox="0 0 200 200" 方便居中缩放）
- 将 SVG 插入目标容器（如
document.getElementById('chart').appendChild(svg)）
计算饼图扇形角度与路径
假设有数据 [30, 45, 25]（总和为 100），每个值对应一个扇形：
- 总和 =
data.reduce((a, b) => a + b, 0) - 当前累计角度 = 上一个扇形结束角（初始为 0）
- 当前扇形角度 =
(value / total) * 360 - 起始弧度 =
startAngle * Math.PI / 180，终止弧度同理 - 圆心设为 (100, 100)，半径 r = 80；用极坐标算出起点 (x1, y1) 和终点 (x2, y2)
SVG 路径命令示例（大圆弧绘制扇形）：M cx cy L x1 y1 A r r 0 largeFlag 1 x2 y2 Z
其中 largeFlag 根据角度是否 >180° 判定（1 表示大弧，0 表示小弧）
动态创建并插入 path 元素
对每个数据项生成一个 <path>，并设置 fill 颜色、stroke 等样式：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
- 用
document.createElementNS('http://www.w3.org/2000/svg', 'path')创建 - 设置
path.setAttribute('d', dString)和path.setAttribute('fill', color) - 可选：添加
path.setAttribute('stroke', '#fff')和'stroke-width', '2'做扇形分隔 - 调用
svg.appendChild(path)插入
增强可读性：添加图例与文字标签
纯图形不够直观，可追加 SVG 文本与分组：
- 用
createElementNS创建<text>，设置x、y、font-size、text-anchor居中对齐 - 在饼图外侧按角度位置放置百分比文本（如
Math.round((val/total)*100) + '%'） - 另建
<g>分组用于图例：每个图例含小色块<rect>+ 文字<text>，横向排列
注意：所有文本和图形坐标都基于 SVG 的用户坐标系，无需额外转换。
