pin_drop当前位置:知识文库 ❯ 图文
数据可视化：Chart.js图表库 - 从入门到实践详解
教程简介
Chart.js是最流行的开源JavaScript图表库之一，以简洁的API、优美的默认样式和良好的响应式支持著称。它支持8种核心图表类型，提供丰富的配置选项和插件系统，适合快速构建交互式数据可视化。本教程将全面讲解Chart.js的安装与配置、图表类型、数据格式、选项配置、插件系统、自定义图表、响应式和动画控制，帮助你熟练使用Chart.js构建专业级图表。
核心概念
Chart.js的特点
轻量级：压缩后约60KB，无外部依赖
8种图表类型：折线图、柱状图、面积图、饼图、环形图、雷达图、极地面积图、散点图
响应式：自动适应容器尺寸变化
动画：内置丰富的动画效果
交互：悬停提示、图例点击、缩放等
插件：可扩展的插件系统
Canvas渲染：基于Canvas 2D，性能优秀
安装方式
代码示例
<!-- CDN方式 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- npm方式 -->
<!-- npm install chart.js -->基本使用模式
代码示例
const ctx = document.getElementById('myChart').getContext('2d');
const chart = new Chart(ctx, {
type: 'bar', // 图表类型
data: { // 数据
labels: [...],
datasets: [...]
},
options: { // 配置选项
responsive: true,
plugins: { ... },
scales: { ... }
}
});语法与用法
数据格式
Chart.js使用统一的数据格式：
代码示例
data: {
labels: ['一月', '二月', '三月'], // X轴标签
datasets: [{
label: '销售额', // 数据集名称
data: [12, 19, 3], // 数据值
backgroundColor: 'rgba(78,121,167,0.5)', // 填充颜色
borderColor: '#4e79a7', // 边框颜色
borderWidth: 2, // 边框宽度
hoverBackgroundColor: '#4e79a7', // 悬停填充色
hoverBorderColor: '#333', // 悬停边框色
}]
}图表类型
核心配置选项
代码示例
options: {
responsive: true, // 响应式
maintainAspectRatio: true, // 保持宽高比
animation: { // 动画
duration: 1000,
easing: 'easeOutQuart'
},
plugins: {
title: { // 标题
display: true,
text: '图表标题'
},
legend: { // 图例
position: 'top'
},
tooltip: { // 提示框
mode: 'index',
intersect: false
}
},
scales: { // 坐标轴
x: { ... },
y: { ... }
}
}代码示例
示例1：Chart.js多种图表类型
以下示例展示Chart.js的多种图表类型，包含完整配置和交互。
代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js多种图表类型</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: #f5f7fa;
padding: 20px;
}
h1 { text-align: center; color: #2c3e50; margin-bottom: 20px; }
.chart-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
gap: 20px;
max-width: 1200px;
margin: 0 auto;
}
.chart-card {
background: #fff;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.chart-card h3 {
color: #34495e;
margin-bottom: 15px;
font-size: 15px;
}
.chart-wrapper {
position: relative;
width: 100%;
}
</style>
</head>
<body>
<h1>Chart.js 图表类型展示</h1>
<div class="chart-grid">
<div class="chart-card">
<h3>折线图 - 月度趋势</h3>
<div class="chart-wrapper"><canvas id="lineChart"></canvas></div>
</div>
<div class="chart-card">
<h3>柱状图 - 季度对比</h3>
<div class="chart-wrapper"><canvas id="barChart"></canvas></div>
</div>
<div class="chart-card">
<h3>环形图 - 市场份额</h3>
<div class="chart-wrapper"><canvas id="doughnutChart"></canvas></div>
</div>
<div class="chart-card">
<h3>雷达图 - 能力评估</h3>
<div class="chart-wrapper"><canvas id="radarChart"></canvas></div>
</div>
<div class="chart-card">
<h3>面积图 - 流量趋势</h3>
<div class="chart-wrapper"><canvas id="areaChart"></canvas></div>
</div>
<div class="chart-card">
<h3>极地面积图 - 分类占比</h3>
<div class="chart-wrapper"><canvas id="polarChart"></canvas></div>
</div>
</div>
<script>
const colors = {
blue: '#4e79a7', orange: '#f28e2b', red: '#e15759',
teal: '#76b7b2', green: '#59a14f', yellow: '#edc948',
purple: '#b07aa1', pink: '#ff9da7'
};
const palette = Object.values(colors);
// 折线图
new Chart(document.getElementById('lineChart'), {
type: 'line',
data: {
labels: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
datasets: [{
label: '产品A',
data: [65,59,80,81,56,55,40,45,60,70,85,90],
borderColor: colors.blue,
backgroundColor: colors.blue + '20',
tension: 0.4,
fill: false,
pointRadius: 4,
pointHoverRadius: 6
}, {
label: '产品B',
data: [28,48,40,19,86,27,55,43,67,52,45,60],
borderColor: colors.red,
backgroundColor: colors.red + '20',
tension: 0.4,
fill: false,
pointRadius: 4,
pointHoverRadius: 6
}]
},
options: {
responsive: true,
plugins: {
legend: { position: 'top' },
tooltip: { mode: 'index', intersect: false }
},
scales: {
y: { beginAtZero: true, grid: { color: '#f0f0f0' } },
x: { grid: { display: false } }
}
}
});
// 柱状图
new Chart(document.getElementById('barChart'), {
type: 'bar',
data: {
labels: ['Q1','Q2','Q3','Q4'],
datasets: [
{ label: '华东', data: [120,150,180,200], backgroundColor: colors.blue },
{ label: '华南', data: [90,110,130,160], backgroundColor: colors.orange },
{ label: '华北', data: [80,95,110,140], backgroundColor: colors.green }
]
},
options: {
responsive: true,
plugins: { legend: { position: 'top' } },
scales: {
y: { beginAtZero: true, grid: { color: '#f0f0f0' } },
x: { grid: { display: false } }
}
}
});
// 环形图
new Chart(document.getElementById('doughnutChart'), {
type: 'doughnut',
data: {
labels: ['Chrome','Safari','Firefox','Edge','其他'],
datasets: [{
data: [64.7, 18.8, 3.2, 5.3, 8.0],
backgroundColor: [colors.blue, colors.orange, colors.red, colors.teal, colors.yellow],
borderWidth: 2,
borderColor: '#fff',
hoverOffset: 8
}]
},
options: {
responsive: true,
cutout: '55%',
plugins: {
legend: { position: 'right' },
tooltip: {
callbacks: {
label: ctx => `${ctx.label}: ${ctx.parsed}%`
}
}
}
}
});
// 雷达图
new Chart(document.getElementById('radarChart'), {
type: 'radar',
data: {
labels: ['性能','易用性','安全性','可扩展','稳定性','文档'],
datasets: [{
label: '产品A',
data: [85,70,90,75,88,65],
borderColor: colors.blue,
backgroundColor: colors.blue + '25',
pointBackgroundColor: colors.blue
}, {
label: '产品B',
data: [70,85,75,90,72,80],
borderColor: colors.red,
backgroundColor: colors.red + '25',
pointBackgroundColor: colors.red
}]
},
options: {
responsive: true,
scales: {
r: {
beginAtZero: true,
max: 100,
grid: { color: '#eee' },
angleLines: { color: '#eee' },
pointLabels: { font: { size: 12 } }
}
}
}
});
// 面积图
new Chart(document.getElementById('areaChart'), {
type: 'line',
data: {
labels: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
datasets: [{
label: '自然搜索',
data: [320,350,380,420,450,480,520,550,530,560,590,620],
borderColor: colors.blue,
backgroundColor: colors.blue + '30',
fill: true,
tension: 0.4
}, {
label: '社交媒体',
data: [180,200,220,250,280,310,340,360,350,370,400,420],
borderColor: colors.orange,
backgroundColor: colors.orange + '30',
fill: true,
tension: 0.4
}]
},
options: {
responsive: true,
plugins: { tooltip: { mode: 'index', intersect: false } },
scales: {
y: { beginAtZero: true, stacked: true, grid: { color: '#f0f0f0' } },
x: { grid: { display: false } }
}
}
});
// 极地面积图
new Chart(document.getElementById('polarChart'), {
type: 'polarArea',
data: {
labels: ['电子产品','服装','食品','家居','运动'],
datasets: [{
data: [85, 65, 45, 55, 35],
backgroundColor: [
colors.blue + '80', colors.orange + '80', colors.red + '80',
colors.teal + '80', colors.green + '80'
],
borderColor: [colors.blue, colors.orange, colors.red, colors.teal, colors.green],
borderWidth: 2
}]
},
options: {
responsive: true,
scales: { r: { beginAtZero: true, grid: { color: '#eee' } } },
plugins: { legend: { position: 'right' } }
}
});
</script>
</body>
</html>示例2：Chart.js自定义图表与插件
以下示例展示Chart.js的自定义配置、插件开发和动态数据更新。
代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js自定义与动态更新</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: #f5f7fa;
padding: 20px;
}
.container { max-width: 950px; margin: 0 auto; }
h1 { text-align: center; color: #2c3e50; margin-bottom: 20px; }
.chart-card {
background: #fff;
border-radius: 12px;
padding: 25px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
margin-bottom: 20px;
}
.chart-card h2 { color: #34495e; margin-bottom: 15px; font-size: 18px; }
.chart-wrapper { position: relative; width: 100%; height: 350px; }
.controls {
display: flex;
gap: 8px;
margin-top: 15px;
flex-wrap: wrap;
}
.btn {
padding: 8px 18px;
border: none;
border-radius: 8px;
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
}
.btn-primary { background: #4e79a7; color: #fff; }
.btn-primary:hover { background: #3d6a96; }
.btn-secondary { background: #f0f0f0; color: #666; }
.btn-secondary:hover { background: #e0e0e0; }
</style>
</head>
<body>
<div class="container">
<h1>Chart.js 自定义与动态更新</h1>
<div class="chart-card">
<h2>动态数据更新（实时模拟）</h2>
<div class="chart-wrapper"><canvas id="dynamicChart"></canvas></div>
<div class="controls">
<button class="btn btn-primary" onclick="startRealtime()">开始实时</button>
<button class="btn btn-secondary" onclick="stopRealtime()">停止</button>
<button class="btn btn-secondary" onclick="addDataset()">添加数据集</button>
<button class="btn btn-secondary" onclick="removeDataset()">移除数据集</button>
</div>
</div>
<div class="chart-card">
<h2>自定义插件（中心文字+渐变背景）</h2>
<div class="chart-wrapper"><canvas id="customChart"></canvas></div>
</div>
</div>
<script>
// 动态折线图
const dynamicCtx = document.getElementById('dynamicChart');
const dynamicData = {
labels: Array.from({length: 20}, (_, i) => i + 1),
datasets: [{
label: '实时数据',
data: Array.from({length: 20}, () => Math.random() * 50 + 25),
borderColor: '#4e79a7',
backgroundColor: '#4e79a720',
fill: true,
tension: 0.4,
pointRadius: 3
}]
};
const dynamicChart = new Chart(dynamicCtx, {
type: 'line',
data: dynamicData,
options: {
responsive: true,
maintainAspectRatio: false,
animation: { duration: 300 },
plugins: {
legend: { position: 'top' },
tooltip: { mode: 'index', intersect: false }
},
scales: {
y: { min: 0, max: 100, grid: { color: '#f0f0f0' } },
x: { grid: { display: false } }
}
}
});
let realtimeTimer = null;
let counter = 20;
function startRealtime() {
if (realtimeTimer) return;
realtimeTimer = setInterval(() => {
counter++;
dynamicData.labels.push(counter);
dynamicData.datasets.forEach(ds => {
const last = ds.data[ds.data.length - 1];
ds.data.push(Math.max(5, Math.min(95, last + (Math.random() - 0.5) * 20)));
});
if (dynamicData.labels.length > 30) {
dynamicData.labels.shift();
dynamicData.datasets.forEach(ds => ds.data.shift());
}
dynamicChart.update('none'); // 无动画更新提升性能
}, 500);
}
function stopRealtime() {
clearInterval(realtimeTimer);
realtimeTimer = null;
}
const dsColors = ['#e15759','#59a14f','#f28e2b','#76b7b2'];
let dsIndex = 0;
function addDataset() {
if (dynamicData.datasets.length >= 5) return;
const color = dsColors[dsIndex++ % dsColors.length];
dynamicData.datasets.push({
label: `数据集${dynamicData.datasets.length + 1}`,
data: Array.from({length: dynamicData.labels.length}, () => Math.random() * 50 + 25),
borderColor: color,
backgroundColor: color + '20',
fill: true,
tension: 0.4,
pointRadius: 3
});
dynamicChart.update();
}
function removeDataset() {
if (dynamicData.datasets.length <= 1) return;
dynamicData.datasets.pop();
dynamicChart.update();
}
// 自定义插件：环形图中心文字
const centerTextPlugin = {
id: 'centerText',
afterDraw(chart) {
if (chart.config.type !== 'doughnut') return;
const { ctx, chartArea: { top, bottom, left, right } } = chart;
const centerX = (left + right) / 2;
const centerY = (top + bottom) / 2;
const total = chart.data.datasets[0].data.reduce((a, b) => a + b, 0);
ctx.save();
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.font = 'bold 28px sans-serif';
ctx.fillStyle = '#2c3e50';
ctx.fillText(total.toLocaleString(), centerX, centerY - 10);
ctx.font = '13px sans-serif';
ctx.fillStyle = '#999';
ctx.fillText('总用户数', centerX, centerY + 15);
ctx.restore();
}
};
// 渐变背景插件
const gradientBgPlugin = {
id: 'gradientBg',
beforeDraw(chart) {
const { ctx, chartArea } = chart;
if (!chartArea) return;
const { top, bottom, left, right } = chartArea;
const gradient = ctx.createLinearGradient(left, top, right, bottom);
gradient.addColorStop(0, '#f8f9ff');
gradient.addColorStop(1, '#fff');
ctx.save();
ctx.fillStyle = gradient;
ctx.fillRect(left, top, right - left, bottom - top);
ctx.restore();
}
};
// 自定义环形图
new Chart(document.getElementById('customChart'), {
type: 'doughnut',
data: {
labels: ['活跃用户', '沉默用户', '新用户', '流失用户'],
datasets: [{
data: [4500, 2200, 1800, 800],
backgroundColor: ['#4e79a7','#f28e2b','#59a14f','#e15759'],
borderWidth: 3,
borderColor: '#fff',
hoverOffset: 10
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
cutout: '60%',
plugins: {
legend: { position: 'right', labels: { padding: 15, font: { size: 13 } } },
tooltip: {
callbacks: {
label: ctx => {
const total = ctx.dataset.data.reduce((a, b) => a + b, 0);
const pct = (ctx.parsed / total * 100).toFixed(1);
return `${ctx.label}: ${ctx.parsed.toLocaleString()} (${pct}%)`;
}
}
}
}
},
plugins: [centerTextPlugin, gradientBgPlugin]
});
</script>
</body>
</html>示例3：Chart.js响应式与动画控制
以下示例展示Chart.js的响应式配置和动画控制选项。
代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js响应式与动画</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: #f5f7fa;
padding: 20px;
}
.container { max-width: 900px; margin: 0 auto; }
h1 { text-align: center; color: #2c3e50; margin-bottom: 20px; }
.chart-card {
background: #fff;
border-radius: 12px;
padding: 25px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
margin-bottom: 20px;
}
.chart-card h2 { color: #34495e; margin-bottom: 15px; font-size: 16px; }
.chart-box { position: relative; width: 100%; }
.controls {
display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap;
}
.btn {
padding: 6px 14px; border: 1px solid #ddd; border-radius: 6px;
background: #fff; color: #666; font-size: 12px; cursor: pointer;
}
.btn:hover { border-color: #4e79a7; color: #4e79a7; }
.btn.active { background: #4e79a7; color: #fff; border-color: #4e79a7; }
.resize-handle {
resize: horizontal;
overflow: hidden;
border: 2px dashed #ddd;
border-radius: 8px;
padding: 15px;
min-width: 300px;
max-width: 100%;
}
</style>
</head>
<body>
<div class="container">
<h1>Chart.js 响应式与动画</h1>
<div class="chart-card">
<h2>响应式图表（拖拽右下角调整大小）</h2>
<div class="resize-handle">
<div class="chart-box"><canvas id="responsiveChart"></canvas></div>
</div>
</div>
<div class="chart-card">
<h2>动画效果演示</h2>
<div class="chart-box" style="height:300px"><canvas id="animChart"></canvas></div>
<div class="controls">
<button class="btn" onclick="replayAnimation('easeOutQuart')">easeOutQuart</button>
<button class="btn" onclick="replayAnimation('easeInOutCubic')">easeInOutCubic</button>
<button class="btn" onclick="replayAnimation('easeOutBounce')">easeOutBounce</button>
<button class="btn" onclick="replayAnimation('linear')">linear</button>
<button class="btn" onclick="replayAnimation('easeOutElastic')">easeOutElastic</button>
</div>
</div>
</div>
<script>
// 响应式图表
new Chart(document.getElementById('responsiveChart'), {
type: 'bar',
data: {
labels: ['一月','二月','三月','四月','五月','六月'],
datasets: [{
label: '销售额',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: ['#4e79a7','#f28e2b','#e15759','#76b7b2','#59a14f','#edc948']
}]
},
options: {
responsive: true,
maintainAspectRatio: true,
plugins: {
legend: { display: false },
title: { display: true, text: '拖拽容器调整大小', font: { size: 14 } }
},
scales: {
y: { beginAtZero: true, grid: { color: '#f0f0f0' } },
x: { grid: { display: false } }
}
}
});
// 动画图表
let animChart = null;
function createAnimChart(easing) {
if (animChart) animChart.destroy();
animChart = new Chart(document.getElementById('animChart'), {
type: 'bar',
data: {
labels: ['A','B','C','D','E','F','G','H'],
datasets: [{
label: '数据',
data: Array.from({length: 8}, () => Math.round(Math.random() * 80 + 20)),
backgroundColor: '#4e79a780',
borderColor: '#4e79a7',
borderWidth: 2,
borderRadius: 6
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
animation: {
duration: 1500,
easing: easing,
delay: (context) => context.dataIndex * 100
},
plugins: {
legend: { display: false },
title: { display: true, text: `动画缓动: ${easing}`, font: { size: 14 } }
},
scales: {
y: { beginAtZero: true, max: 100, grid: { color: '#f0f0f0' } },
x: { grid: { display: false } }
}
}
});
}
function replayAnimation(easing) {
createAnimChart(easing);
}
createAnimChart('easeOutQuart');
</script>
</body>
</html>浏览器兼容性
注意事项与最佳实践
版本选择：Chart.js 4.x不支持IE11，如需兼容IE请使用2.x版本。
容器尺寸：确保Canvas的父容器有明确的尺寸，否则响应式可能失效。
性能优化：大数据量时关闭动画（animation: false）或使用
chart.update('none')。销毁图表：重新创建图表前必须调用
chart.destroy()销毁旧实例。响应式：设置
responsive: true和maintainAspectRatio: false实现自适应。颜色格式：使用标准颜色格式（hex、rgba），避免不兼容的格式。
数据更新：直接修改
chart.data后调用chart.update()，而非重新创建图表。插件注册：全局插件使用
Chart.register()，局部插件在配置中传入。
代码规范示例
代码示例
// 好的做法：封装Chart.js创建函数
function createChart(canvasId, config) {
const canvas = document.getElementById(canvasId);
const existingChart = Chart.getChart(canvas);
if (existingChart) existingChart.destroy();
return new Chart(canvas, {
type: config.type,
data: {
labels: config.labels,
datasets: config.datasets.map(ds => ({
label: ds.label,
data: ds.data,
backgroundColor: ds.color + '80',
borderColor: ds.color,
borderWidth: 2,
...ds.options
}))
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { position: 'top' },
tooltip: { mode: 'index', intersect: false }
},
scales: {
y: { beginAtZero: true, grid: { color: '#f0f0f0' } },
x: { grid: { display: false } }
},
...config.options
}
});
}常见问题与解决方案
问题1：图表不显示
原因：容器尺寸为0或Canvas被隐藏。
解决方案：确保父容器有明确的宽高，检查CSS的display属性。
问题2：响应式不工作
原因：外层容器设置了固定宽度。
解决方案：使用百分比宽度，确保responsive: true。
问题3：动画卡顿
原因：数据量大或频繁更新。
解决方案：关闭动画或使用chart.update('none')进行无动画更新。
问题4：内存泄漏
原因：重复创建图表未销毁旧实例。
解决方案：创建前先调用chart.destroy()。
总结
本教程全面讲解了Chart.js图表库的使用：
安装与配置：CDN引入、基本配置模式
图表类型：8种核心图表类型及其配置
数据格式：labels和datasets的标准格式
选项配置：标题、图例、提示框、坐标轴等
插件系统：自定义插件开发、中心文字、渐变背景
自定义图表：自定义颜色、形状、交互
响应式：自适应容器、宽高比控制
动画控制：缓动函数、延迟动画、动态更新
Chart.js是快速构建交互式图表的理想选择，掌握其配置和扩展能力可以大幅提升开发效率。
常见问题
什么是Chart.js图表库？
Chart.js图表库是HTML5开发中的重要技术，本教程详细介绍了其核心概念和实践方法。
如何学习Chart.js图表库的实际应用？
教程中提供了完整的代码示例和实践指导，建议结合示例代码动手练习。
Chart.js图表库有哪些注意事项？
常见注意事项包括兼容性、性能优化等，教程的注意事项与最佳实践部分有详细说明。
Chart.js图表库适合初学者吗？
本教程从基础概念讲起，循序渐进，适合有一定HTML和JavaScript基础的初学者。
Chart.js图表库的核心要点是什么？
核心要点包括教程简介等内容，建议按教程顺序逐步学习。
标签：
柱状图
雷达图
内存管理
帧率优化
占比分析
数据可视化
Chart.js
Chart
本文由小确幸生活整理发布，转载请注明出处
本文涉及AI创作
内容由AI创作，请仔细甄别
