Chart.js 不支持单实例混合柱状图、折线图和饼图，因三者渲染逻辑与坐标系不同；需用多个 new Chart() 实例分别创建，并通过 CSS 布局并排展示。
Chart.js 只支持单类型图表，new Chart() 不能直接创建“柱状折线饼图”混合体
Chart.js 的核心设计是「一个 Chart 实例对应一种图表类型」。所谓“柱状折线饼图”，本质上是三种不同渲染逻辑的组合（柱状图用直角坐标系、折线图用路径连线、饼图用极坐标扇形），Chart.js 原生不支持在同一个 canvas 上混用 type: 'bar'、type: 'line' 和 type: 'pie'。强行写进去会报错：TypeError: Unknown chart type: pie 或直接空白——因为 type 只能是单一字符串。
想在同一页面放柱状图 + 折线图 + 饼图？用多个 new Chart() 实例
这是最常见也最稳妥的做法：每个图表独占一个 <canvas> 元素，各自初始化。注意三点：
- 每个
<canvas id="chart-bar">、<canvas id="chart-line">、<canvas id="chart-pie">必须有唯一id，且不能复用 - 初始化时分别传入对应配置：
new Chart(ctxBar, { type: 'bar', data: ..., options: ... })、new Chart(ctxLine, { type: 'line', ... })、new Chart(ctxPie, { type: 'pie', ... }) - 如果共用同一份数据，注意结构适配：饼图
data要是{ labels: [...], datasets: [{ data: [...] }] }；而柱状/折线图需要labels和datasets中每个dataset的data长度一致
真要混合柱状图和折线图？用 type: 'bar' + dataset.type: 'line'
Chart.js 支持在「同坐标系下」混合柱状与折线（即双 Y 轴或共享 X 轴），但前提是主图类型为 'bar' 或 'line'，再通过单个 dataset 的 type 覆盖。例如：
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar'],
datasets: [
{ label: 'Sales', data: [12, 19, 3], type: 'bar' },
{ label: 'Growth %', data: [5, 8, 2], type: 'line', yAxisID: 'y1' }
]
},
options: {
scales: {
y: { position: 'left' },
y1: { position: 'right', grid: { drawOnChartArea: false } }
}
}
});
注意：type: 'pie' 无法参与这种混合——它根本不走笛卡尔坐标系，没有 scales，也没有 yAxisID 概念。
立即学习“前端免费学习笔记（深入）”；
为什么没人做“柱状折线饼图”插件？不是技术限制，是语义冲突
饼图表达的是整体占比关系，柱状图/折线图表达的是数值大小或趋势变化，把三者塞进一个视觉单元，用户根本无法建立有效认知映射。Chart.js 官方明确不鼓励这类组合，社区也几乎无成熟插件。如果你被需求方要求“一页全显示”，更实际的解法是：
- 用 CSS Grid / Flex 布局并排三个独立
<canvas>，控制宽度和间距 - 若需联动交互（如点击饼图某块高亮对应柱子），监听
onClick事件后手动调用其他图表的update()或高亮逻辑 - 避免在移动端小屏强行三图并列，考虑 tab 切换或折叠面板
真正难的从来不是代码能不能写出来，而是图表是否在传达正确信息。强行拼凑类型，往往意味着问题本身还没被理清。
