用 chart.js 渲染资产饼图最稳：需引入库、初始化 canvas、匹配 labels 与 data 长度；数据通过 script 标签传 json；响应式需父容器设宽；颜色由 backgroundcolor 数组控制；更新数据后必须调用 chart.update()。
用 Chart.js 渲染 HTML 页面里的资产饼图最稳
纯 HTML/CSS 做不了动态饼图，必须靠 JS 图表库；Chart.js 是当前最轻量、兼容性好、文档清晰的选择。它不依赖 jQuery，直接通过 <canvas></canvas> 渲染，适合嵌入静态页面或简单后台管理页。
常见错误是直接在 <div> 里写文字“饼图”，结果页面空白——因为没引入 <code>Chart.js，也没初始化 canvas 上下文。
- 必须在页面底部或
DOMContentLoaded后执行图表初始化，否则document.getElementById('myChart')找不到节点 -
canvas标签不能设display: none或放在未渲染的 tab 面板里，否则尺寸为 0，图表不显示 - 数据字段名要严格匹配：
labels和datasets[0].data长度必须一致，否则报错"Uncaught Error: labels is required"
data 怎么从后端传进前端（JSON 格式）
HTML 页面本身不处理逻辑，所以资产数据得提前准备好。推荐方式：服务端渲染时把 JSON 写进 <script></script> 标签，避免额外 AJAX 请求和跨域问题。
例如后端吐出：
<script id="asset-data" type="application/json">
{"labels":["股票","债券","现金","基金"],"datasets":[{"data":[45,30,10,15}]}</script>
前端读取时用：
const dataEl = document.getElementById('asset-data');
const assetData = JSON.parse(dataEl.textContent);
- 别用
innerHTML解析，可能被 XSS 利用；textContent更安全 - 如果后端返回的是对象而非字符串（如 Django 模板中用
{{ data|json_script:"asset-data" }}），也要确保最终输出是合法 JSON 字符串 - 数值必须是数字类型，字符串如
"45"会导致扇区不渲染（Chart.js不自动转换）
怎么让饼图响应式且适配移动端
默认 Chart.js 是响应式的，但前提是父容器有明确宽度（比如 width: 100%），且没被 overflow: hidden 截断。
- 给
canvas外层<div> 加 <code>style="width: 100%; max-width: 600px;"，防止在小屏上撑破布局 - 禁用缩放动画可提升低端设备性能：
options.animation.animateRotate = false - 移动端点击扇区高亮时，如果触发了页面滚动，加
event.preventDefault()在onClick回调里 - 字体太小看不清？改
options.plugins.legend.labels.font.size，最小建议设为12 - 颜色数组长度必须和
data一致，少一个就会循环填充，导致“现金”显示成股票的颜色 - 顺序严格按
labels索引对应，不是按数值大小排序；想按占比降序展示，得在后端或 JS 里先sort()数据并同步调整labels - 十六进制颜色如
"#36A2EB"可用，但带透明度的"rgba(54, 162, 235, 0.8)"更利于区分重叠图层（比如叠加环形图） - 深色背景上文字发虚？手动设置
options.plugins.legend.labels.color = '#fff'
为什么饼图扇区颜色没生效或顺序错乱
颜色由 datasets[0].backgroundColor 控制，不是全局配置。漏写这个数组，所有扇区会默认用同一色（通常是灰色）。
真正麻烦的不是画出来，而是数据更新后重新渲染——chart.data 改了必须调 chart.update()，直接改 DOM 或重插 canvas 会丢掉实例引用，再调 update() 就报错 "chart is not defined"。
