Chart.js 不支持单 canvas 混合柱状图、折线图与饼图，因每实例仅绑定一种 type，饼图无坐标系而柱/线图依赖笛卡尔系，混用将报错或静默失败；正确做法是创建三个独立实例并分别绑定不同 canvas。
Chart.js 不支持在单个 canvas 上混合柱状图、折线图和饼图——饼图必须独占一个图表实例，而柱状图与折线图可以共存于同一坐标系。这是由其渲染机制决定的，不是配置问题。
为什么不能把柱状图、折线图、饼图画在同一个 chart 实例里
Chart.js 的每个 Chart 实例绑定一种 type（如 'bar'、'line'、'pie'），且该类型决定了坐标系结构、数据解析逻辑和绘图管线。饼图没有 x/y 轴，而柱状图和折线图强依赖笛卡尔坐标系；强行混用会触发 TypeError: chart.data.datasets[0].data is undefined 或静默渲染失败。
常见错误现象：
- 配置了
type: 'bar'却往datasets里塞type: 'pie'的数据项 - 用
plugins尝试“注入”饼图图层，结果 canvas 只显示空白或报Unexpected value at index 0 - 以为设置
options.plugins.legend.display = false就能隐藏冲突，实际仍无法初始化
如何在同一页面并排展示柱状图 + 折线图 + 饼图
正确做法是创建三个独立的 Chart 实例，分别绑定不同 canvas 元素。它们可共享数据源，但需各自构造适配的 data 结构。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- HTML 中准备三个
<canvas id="chart-bar">、<canvas id="chart-line">、<canvas id="chart-pie"> - JavaScript 中分别调用
new Chart(...)，每个传入对应type和专用data - 若需联动（如点击饼图某扇形高亮柱状图对应柱子），用
chart.canvas.onclick捕获事件，再手动调用其他图表的update()或修改activeElements - 注意响应式：为避免重叠，给每个
canvas外层包裹<div class="chart-container">并设position: relative，Chart.js 的responsive: true才能正常缩放
bar 和 line 同图表时的关键配置点
柱状图与折线图可共存于同一 Chart 实例（type: 'bar'），前提是所有 dataset 显式声明 type，且 y 轴适配数值范围。
必须处理的细节：
- 折线图 dataset 必须设
type: 'line'，否则默认继承 chart 的bar类型，导致点不连线 - 若数据量级差异大（如柱状图值为千级，折线图为个位数），需启用双 y 轴：
yAxes: [{id: 'left', position: 'left'}, {id: 'right', position: 'right'}]，并在对应 dataset 中指定yAxisID: 'right' -
borderWidth对bar是边框粗细，对line是线宽，二者单位一致但视觉权重不同，建议line设borderWidth: 2，bar设borderWidth: 1 - 动画默认同步触发，若想折线先动、柱状后动，需在
options.animation中按 dataset 索引分写onComplete回调
加载 Chart.js 时容易被忽略的兼容性陷阱
新版 Chart.js（v4+）已移除对 IE 的支持，且默认使用 ES6+ 语法。直接 script 引入可能在旧版 Safari 或微信内置浏览器报 SyntaxError: Unexpected token '（模板字符串未转义）。
安全做法：
- 生产环境优先用 npm 安装：
npm install chart.js，再通过构建工具（如 Vite、Webpack）做兼容性处理 - 若必须 CDN，选
https://cdn.jsdelivr.net/npm/chart.js@4/dist/Chart.umd.js（UMD 版本），而非.esm.js - 动态创建
canvas元素时，确保在 DOM ready 后执行new Chart()，否则getContext('2d')返回 null - 移动端 Safari 对
canvas高度为 0 的渲染有 bug，务必为canvas设置最小高度（如style="min-height: 300px;"）或用height属性显式声明
最常被跳过的一步：在销毁图表前调用 chart.destroy()。如果页面频繁切换、复用同一 DOM 节点，不销毁会导致内存泄漏和后续 new Chart() 失败，报错信息是 Canvas is already in use。
