B Bootstrap组件实验室
返回目录首页

Chart.js 图表 Chart.js 4.5.1

轻量灵活的 HTML5 Canvas 图表库，柱状、折线、饼图开箱即用。本页使用 jsDelivr 固定 chart.js@4.5.1（UMD 版挂全局 Chart），无依赖，图表容器固定高度，移动端自适应。

官方对照 官方没有

Bootstrap 官方只提供布局与交互组件，不含任何图表能力；需要数据可视化时 Chart.js 是最常见的轻量选择。

对比维度Bootstrap 官方Chart.js 4.5.1
能力定位界面组件框架，不含图表专用 Canvas 图表库，响应式自动缩放
核心特性—柱状 / 折线 / 饼环 / 极坐标 / 雷达等 8 种图表，tooltip 与图例内建
依赖与体积自带 bundle单个 chart.umd.min.js 约 220KB（gzip 后约 80KB），零依赖
适用场景—后台仪表盘、销售趋势、占比分布等常规业务图表
何时选用本库—图表类型常规、追求上手快与包体小；超大数据量复杂图可换 ECharts
说明 
本小节为对照说明，无示例代码。

引入方式

通过 jsDelivr 固定 chart.js@4.5.1 的 UMD 版（dist/chart.umd.min.js），加载后全局挂 Chart 构造器；中文标签直接作为字符串传入即可。

HTML 引入 
<!-- body 末尾引入（UMD 版挂全局 Chart） -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.min.js"></script>

<!-- 准备一个固定高度的容器 -->
<div style="height:300px"><canvas id="myChart"></canvas></div>

<script>
  new Chart(document.getElementById('myChart'), { type: 'bar', data: {} });
</script>

柱状图

type: 'bar' 渲染月度销售额柱状图；容器固定 300px 高度，maintainAspectRatio: false 保证移动端填满容器。

HTML + JS 示例 
<div style="height:300px"><canvas id="barChart"></canvas></div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.min.js"></script>
<script>
new Chart(document.getElementById('barChart'), {
  type: 'bar',
  data: {
    labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
    datasets: [{
      label: '销售额（万元）',
      data: [120, 190, 150, 230, 280, 340],
      backgroundColor: '#0d6efd'
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false
  }
});
</script>

折线图

type: 'line' 展示近半年网站访问量趋势，开启平滑曲线与数据点。

HTML + JS 示例 
<div style="height:300px"><canvas id="lineChart"></canvas></div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.min.js"></script>
<script>
new Chart(document.getElementById('lineChart'), {
  type: 'line',
  data: {
    labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
    datasets: [{
      label: '访问量（千次）',
      data: [45, 62, 58, 80, 96, 120],
      borderColor: '#198754',
      backgroundColor: 'rgba(25,135,84,.15)',
      tension: 0.35,
      fill: true
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false
  }
});
</script>

饼图 / 环形图

type: 'doughnut' 即环形图，展示获客渠道占比；切回 'pie' 即为实心饼图。

HTML + JS 示例 
<div style="height:300px"><canvas id="pieChart"></canvas></div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.min.js"></script>
<script>
new Chart(document.getElementById('pieChart'), {
  type: 'doughnut',
  data: {
    labels: ['自然搜索', '社交媒体', '直接访问', '外部推荐', '付费广告'],
    datasets: [{
      data: [35, 25, 18, 12, 10],
      backgroundColor: ['#0d6efd', '#198754', '#ffc107', '#dc3545', '#6f42c1']
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false
  }
});
</script>