HTML资产分布饼图制作教程

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 外层
  加 style="width: 100%; max-width: 600px;"，防止在小屏上撑破布局
• 禁用缩放动画可提升低端设备性能：options.animation.animateRotate = false
• 移动端点击扇区高亮时，如果触发了页面滚动，加 event.preventDefault() 在 onClick 回调里
• 字体太小看不清？改 options.plugins.legend.labels.font.size，最小建议设为 12

为什么饼图扇区颜色没生效或顺序错乱

颜色由 datasets[0].backgroundColor 控制，不是全局配置。漏写这个数组，所有扇区会默认用同一色（通常是灰色）。

• 颜色数组长度必须和 data 一致，少一个就会循环填充，导致“现金”显示成股票的颜色
• 顺序严格按 labels 索引对应，不是按数值大小排序；想按占比降序展示，得在后端或 JS 里先 sort() 数据并同步调整 labels
• 十六进制颜色如 "#36A2EB" 可用，但带透明度的 "rgba(54, 162, 235, 0.8)" 更利于区分重叠图层（比如叠加环形图）
• 深色背景上文字发虚？手动设置 options.plugins.legend.labels.color = '#fff'

真正麻烦的不是画出来，而是数据更新后重新渲染——chart.data 改了必须调 chart.update()，直接改 DOM 或重插 canvas 会丢掉实例引用，再调 update() 就报错 "chart is not defined"。

好了，本文到此结束，带大家了解了《HTML资产分布饼图制作教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！