如何在HTML中通过Chart.js的new Chart创建柱状折线饼图等图表

作者：袖梨 2026-06-07

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 概念。

立即学习“前端免费学习笔记（深入）”；