Chart.js 图表类型 #
图表类型概览 #
text
┌─────────────────────────────────────────────────────────────┐
│ Chart.js 8 种图表 │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 基础图表 │ │
│ ├─────────────────────────────────────────────────────┤ │
│ │ Bar（柱状图） Line（折线图） │ │
│ │ Pie（饼图） Doughnut（环形图） │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 高级图表 │ │
│ ├─────────────────────────────────────────────────────┤ │
│ │ Radar（雷达图） Polar Area（极坐标图） │ │
│ │ Bubble（气泡图） Scatter（散点图） │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
柱状图（Bar） #
基本柱状图 #
javascript
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
datasets: [{
label: '销售额（万元）',
data: [65, 59, 80, 81, 56, 55],
backgroundColor: [
'rgba(255, 99, 132, 0.5)',
'rgba(54, 162, 235, 0.5)',
'rgba(255, 206, 86, 0.5)',
'rgba(75, 192, 192, 0.5)',
'rgba(153, 102, 255, 0.5)',
'rgba(255, 159, 64, 0.5)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
水平柱状图 #
javascript
new Chart(ctx, {
type: 'bar',
data: {
labels: ['产品A', '产品B', '产品C', '产品D'],
datasets: [{
label: '销量',
data: [100, 80, 60, 40],
backgroundColor: 'rgba(54, 162, 235, 0.5)'
}]
},
options: {
indexAxis: 'y',
scales: {
x: {
beginAtZero: true
}
}
}
});
堆叠柱状图 #
javascript
new Chart(ctx, {
type: 'bar',
data: {
labels: ['一月', '二月', '三月'],
datasets: [
{
label: '线上销售',
data: [30, 40, 35],
backgroundColor: 'rgba(255, 99, 132, 0.5)'
},
{
label: '线下销售',
data: [20, 25, 30],
backgroundColor: 'rgba(54, 162, 235, 0.5)'
}
]
},
options: {
scales: {
x: { stacked: true },
y: { stacked: true }
}
}
});
分组柱状图 #
javascript
new Chart(ctx, {
type: 'bar',
data: {
labels: ['一月', '二月', '三月'],
datasets: [
{
label: '2023年',
data: [65, 59, 80],
backgroundColor: 'rgba(255, 99, 132, 0.5)'
},
{
label: '2024年',
data: [28, 48, 40],
backgroundColor: 'rgba(54, 162, 235, 0.5)'
}
]
}
});
柱状图特有配置 #
javascript
const options = {
// 柱状图特定选项
datasets: {
bar: {
// 柱子宽度（0-1）
barPercentage: 0.8,
// 类别宽度（0-1）
categoryPercentage: 0.8,
// 是否跳过边框
borderSkipped: 'start', // 'start', 'end', 'left', 'right', 'bottom', 'top', false
// 圆角
borderRadius: 4,
// 边框宽度
borderWidth: 1
}
}
};
折线图（Line） #
基本折线图 #
javascript
new Chart(ctx, {
type: 'line',
data: {
labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
datasets: [{
label: '访问量',
data: [65, 59, 80, 81, 56, 55],
borderColor: 'rgb(75, 192, 192)',
backgroundColor: 'rgba(75, 192, 192, 0.5)',
tension: 0.1
}]
}
});
多折线图 #
javascript
new Chart(ctx, {
type: 'line',
data: {
labels: ['一月', '二月', '三月', '四月', '五月'],
datasets: [
{
label: '北京',
data: [65, 59, 80, 81, 56],
borderColor: 'rgba(255, 99, 132, 1)',
tension: 0.4
},
{
label: '上海',
data: [28, 48, 40, 19, 86],
borderColor: 'rgba(54, 162, 235, 1)',
tension: 0.4
},
{
label: '广州',
data: [45, 25, 35, 60, 40],
borderColor: 'rgba(75, 192, 192, 1)',
tension: 0.4
}
]
}
});
填充区域图 #
javascript
new Chart(ctx, {
type: 'line',
data: {
labels: ['一月', '二月', '三月', '四月', '五月'],
datasets: [{
label: '数据',
data: [65, 59, 80, 81, 56],
borderColor: 'rgb(75, 192, 192)',
backgroundColor: 'rgba(75, 192, 192, 0.5)',
fill: true, // 启用填充
tension: 0.4
}]
}
});
填充选项 #
javascript
const options = {
datasets: {
line: {
// fill 选项
// false: 不填充
// true: 填充到原点
// 'origin': 填充到原点
// 'start': 填充到起始值
// 'end': 填充到结束值
// { target: 'origin' }: 指定目标
// { target: { value: 50 } }: 填充到指定值
fill: {
target: 'origin',
above: 'rgba(75, 192, 192, 0.5)', // 高于目标线的颜色
below: 'rgba(255, 99, 132, 0.5)' // 低于目标线的颜色
}
}
}
};
阶梯折线图 #
javascript
new Chart(ctx, {
type: 'line',
data: {
labels: ['一月', '二月', '三月', '四月', '五月'],
datasets: [{
label: '阶梯数据',
data: [10, 20, 15, 30, 25],
borderColor: 'rgb(75, 192, 192)',
stepped: true // 'before', 'after', 'middle', true
}]
}
});
折线图特有配置 #
javascript
const options = {
datasets: {
line: {
// 曲线张力（0 = 直线，1 = 最大弯曲）
tension: 0.4,
// 是否显示点
pointRadius: 3,
// 悬停点半径
pointHoverRadius: 5,
// 点样式
pointStyle: 'circle',
// 是否显示线条
showLine: true,
// 是否跨越空数据
spanGaps: false,
// 线条样式
borderCapStyle: 'round',
borderJoinStyle: 'round',
borderDash: [], // 虚线
borderDashOffset: 0
}
}
};
饼图（Pie） #
基本饼图 #
javascript
new Chart(ctx, {
type: 'pie',
data: {
labels: ['红色', '蓝色', '黄色', '绿色', '紫色'],
datasets: [{
label: '投票分布',
data: [12, 19, 3, 5, 2],
backgroundColor: [
'rgba(255, 99, 132, 0.7)',
'rgba(54, 162, 235, 0.7)',
'rgba(255, 206, 86, 0.7)',
'rgba(75, 192, 192, 0.7)',
'rgba(153, 102, 255, 0.7)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)'
],
borderWidth: 1
}]
}
});
饼图配置 #
javascript
const options = {
plugins: {
legend: {
position: 'bottom'
},
tooltip: {
callbacks: {
label: (context) => {
const label = context.label || '';
const value = context.parsed;
const total = context.dataset.data.reduce((a, b) => a + b, 0);
const percentage = ((value / total) * 100).toFixed(1) + '%';
return `${label}: ${value} (${percentage})`;
}
}
}
}
};
环形图（Doughnut） #
基本环形图 #
javascript
new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['直接访问', '搜索引擎', '社交媒体', '外部链接'],
datasets: [{
data: [335, 310, 234, 135],
backgroundColor: [
'#FF6384',
'#36A2EB',
'#FFCE56',
'#4BC0C0'
]
}]
},
options: {
cutout: '60%' // 环形内圆大小
}
});
嵌套环形图 #
javascript
new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['外层A', '外层B', '外层C'],
datasets: [
{
label: '外层',
data: [100, 80, 60],
backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
},
{
label: '内层',
data: [50, 40, 30],
backgroundColor: ['#FF9F40', '#4BC0C0', '#9966FF']
}
]
},
options: {
cutout: '40%'
}
});
环形图配置 #
javascript
const options = {
cutout: '50%', // 内圆大小（百分比或像素）
// 旋转角度
rotation: 0,
// 周长
circumference: 360,
// 动画
animation: {
animateRotate: true,
animateScale: true
}
};
雷达图（Radar） #
基本雷达图 #
javascript
new Chart(ctx, {
type: 'radar',
data: {
labels: ['速度', '力量', '技巧', '耐力', '敏捷', '智慧'],
datasets: [{
label: '玩家A',
data: [65, 75, 80, 70, 60, 85],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 2,
pointBackgroundColor: 'rgba(255, 99, 132, 1)'
}]
},
options: {
scales: {
r: {
beginAtZero: true,
max: 100
}
}
}
});
多数据雷达图 #
javascript
new Chart(ctx, {
type: 'radar',
data: {
labels: ['销售', '市场', '研发', '客服', '行政', '财务'],
datasets: [
{
label: '预算',
data: [80, 70, 90, 60, 50, 75],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)'
},
{
label: '实际',
data: [75, 80, 85, 70, 55, 70],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)'
}
]
}
});
雷达图配置 #
javascript
const options = {
scales: {
r: {
// 角度线
angleLines: {
display: true,
color: 'rgba(0, 0, 0, 0.1)'
},
// 网格线
grid: {
color: 'rgba(0, 0, 0, 0.1)'
},
// 点标签
pointLabels: {
font: {
size: 12
},
color: '#333'
},
// 刻度
ticks: {
beginAtZero: true,
max: 100,
stepSize: 20
}
}
}
};
极坐标图（Polar Area） #
基本极坐标图 #
javascript
new Chart(ctx, {
type: 'polarArea',
data: {
labels: ['红色', '绿色', '黄色', '灰色', '蓝色'],
datasets: [{
data: [11, 16, 7, 3, 14],
backgroundColor: [
'rgba(255, 99, 132, 0.7)',
'rgba(75, 192, 192, 0.7)',
'rgba(255, 206, 86, 0.7)',
'rgba(201, 203, 207, 0.7)',
'rgba(54, 162, 235, 0.7)'
]
}]
}
});
极坐标图配置 #
javascript
const options = {
scales: {
r: {
beginAtZero: true,
ticks: {
stepSize: 5
}
}
},
plugins: {
legend: {
position: 'right'
}
}
};
气泡图（Bubble） #
基本气泡图 #
javascript
new Chart(ctx, {
type: 'bubble',
data: {
datasets: [{
label: '气泡数据',
data: [
{ x: 10, y: 20, r: 10 },
{ x: 15, y: 25, r: 15 },
{ x: 20, y: 30, r: 5 },
{ x: 25, y: 15, r: 20 },
{ x: 30, y: 35, r: 8 }
],
backgroundColor: 'rgba(255, 99, 132, 0.5)',
borderColor: 'rgba(255, 99, 132, 1)'
}]
}
});
多数据集气泡图 #
javascript
new Chart(ctx, {
type: 'bubble',
data: {
datasets: [
{
label: '产品A',
data: [
{ x: 10, y: 20, r: 10 },
{ x: 20, y: 30, r: 15 }
],
backgroundColor: 'rgba(255, 99, 132, 0.5)'
},
{
label: '产品B',
data: [
{ x: 15, y: 25, r: 12 },
{ x: 25, y: 35, r: 8 }
],
backgroundColor: 'rgba(54, 162, 235, 0.5)'
}
]
}
});
气泡图配置 #
javascript
const options = {
scales: {
x: {
title: {
display: true,
text: 'X轴标题'
}
},
y: {
title: {
display: true,
text: 'Y轴标题'
}
}
},
plugins: {
tooltip: {
callbacks: {
label: (context) => {
const data = context.raw;
return `(${data.x}, ${data.y}, r=${data.r})`;
}
}
}
}
};
散点图（Scatter） #
基本散点图 #
javascript
new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
label: '散点数据',
data: [
{ x: 1, y: 2 },
{ x: 2, y: 4 },
{ x: 3, y: 3 },
{ x: 4, y: 6 },
{ x: 5, y: 5 }
],
backgroundColor: 'rgba(75, 192, 192, 0.5)',
pointRadius: 6
}]
}
});
多数据集散点图 #
javascript
new Chart(ctx, {
type: 'scatter',
data: {
datasets: [
{
label: '实验组',
data: [
{ x: 1, y: 2.5 },
{ x: 2, y: 4.2 },
{ x: 3, y: 3.8 }
],
backgroundColor: 'rgba(255, 99, 132, 0.5)',
pointStyle: 'circle'
},
{
label: '对照组',
data: [
{ x: 1, y: 1.8 },
{ x: 2, y: 3.5 },
{ x: 3, y: 3.2 }
],
backgroundColor: 'rgba(54, 162, 235, 0.5)',
pointStyle: 'rect'
}
]
}
});
散点图配置 #
javascript
const options = {
scales: {
x: {
type: 'linear',
position: 'bottom',
title: {
display: true,
text: 'X变量'
}
},
y: {
title: {
display: true,
text: 'Y变量'
}
}
}
};
混合图表 #
柱状图 + 折线图 #
javascript
new Chart(ctx, {
type: 'bar',
data: {
labels: ['一月', '二月', '三月', '四月', '五月'],
datasets: [
{
type: 'bar',
label: '销售额',
data: [65, 59, 80, 81, 56],
backgroundColor: 'rgba(54, 162, 235, 0.5)',
yAxisID: 'y'
},
{
type: 'line',
label: '增长率',
data: [10, 15, 20, 18, 25],
borderColor: 'rgba(255, 99, 132, 1)',
yAxisID: 'y1'
}
]
},
options: {
scales: {
y: {
type: 'linear',
position: 'left',
title: {
display: true,
text: '销售额'
}
},
y1: {
type: 'linear',
position: 'right',
title: {
display: true,
text: '增长率(%)'
},
grid: {
drawOnChartArea: false
}
}
}
}
});
图表选择指南 #
按用途选择 #
| 用途 | 推荐图表 |
|---|---|
| 比较 | 柱状图、条形图 |
| 趋势 | 折线图 |
| 占比 | 饼图、环形图 |
| 分布 | 散点图、气泡图 |
| 多维对比 | 雷达图 |
| 时间序列 | 折线图、柱状图 |
按数据类型选择 #
| 数据类型 | 推荐图表 |
|---|---|
| 分类数据 | 柱状图、饼图 |
| 连续数据 | 折线图、散点图 |
| 多变量 | 气泡图、雷达图 |
| 时间数据 | 折线图 |
下一步 #
现在你已经掌握了各种图表类型，接下来学习 高级主题，了解动画、响应式和性能优化！
最后更新：2026-03-28