如何在HTML中通过Chart.js的new Chart()创建柱状折线饼图等图表-html教程-PHP中文网

chart.js 不支持单实例混合柱状图、折线图和饼图，因三者渲染逻辑与坐标系不同；需用多个 new chart() 实例分别创建，并通过 css 布局并排展示。

如何在html中通过chart.js的new chart()创建柱状折线饼图等图表

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> 元素，各自初始化。注意三点：

每个 <canvas id="chart-bar"></canvas>、<canvas id="chart-line"></canvas>、<canvas id="chart-pie"></canvas> 必须有唯一 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 覆盖。例如：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

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