三、核心图表类型
Chart.js提供了8种开箱即用的核心图表类型，覆盖了绝大多数业务场景。
3.1 折线图（Line Chart）
适用场景：展示数据随时间变化的趋势，如股票价格、网站流量、温度变化等。
new Chart(ctx, {
type: 'line',
data: {
labels: ['1月', '2月', '3月', '4月', '5月'],
datasets: [{
label: '2024年销售额',
data: [65, 59, 80, 81, 56],
borderColor: 'rgb(75, 192, 192)',
backgroundColor: 'rgba(75, 192, 192, 0.2)',
tension: 0.3, // 曲线弯曲程度，0为折线，1为最大弯曲
fill: true,
pointRadius: 5, // 数据点半径
pointHoverRadius: 8
}]
},
options: {
responsive: true,
maintainAspectRatio: false[citation:4],
scales: {
y: {
beginAtZero: true[citation:2]
}
}
}
});
3.2 柱状图（Bar Chart）
适用场景：对比不同类别的数据差异，如不同产品的销量、不同部门的绩效等。
new Chart(ctx, {
type: 'bar',
data: {
labels: ['产品A', '产品B', '产品C', '产品D'],
datasets: [{
label: '销量（件）',
data: [120, 200, 150, 80],
backgroundColor: [
'rgba(255, 99, 132, 0.5)',
'rgba(54, 162, 235, 0.5)',
'rgba(255, 206, 86, 0.5)',
'rgba(153, 102, 255, 0.5)'
],
borderColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 206, 86)',
'rgb(153, 102, 255)'
],
borderWidth: 1
}]
}
});
3.3 饼图/环形图（Pie / Doughnut Chart）
适用场景：展示各部分占总体的比例，如市场份额、预算分配等。饼图（Pie）和环形图（Doughnut）的区别在于环形图中心是空的，可以用于放置额外的文本信息。
new Chart(ctx, {
type: 'doughnut', // 环形图；若为饼图则用'pie'
data: {
labels: ['电商', '实体店', '直播带货', '其他'],
datasets: [{
data: [350, 280, 190, 80],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 206, 86)',
'rgb(75, 192, 192)'
],
hoverOffset: 4 // 悬停时扇区偏移量
}]
},
options: {
plugins: {
legend: {
position: 'bottom', // 图例位置[citation:4]
labels: {
font: { size: 14 }
}
},
tooltip: {
callbacks: {
label: (context) => {
const total = context.dataset.data.reduce((a,b) => a + b, 0);
const percent = ((context.raw / total) * 100).toFixed(1);
return `${context.label}: ${context.raw} (${percent}%)`;
}
}
}
}
}
});
3.4 极地区域图（Polar Area Chart）
适用场景：展示多维度的对比数据，每个扇区代表一个维度，半径长度代表数值大小。
new Chart(ctx, {
type: 'polarArea',
data: {
labels: ['速度', '力量', '技巧', '耐力', '智力'],
datasets: [{
data: [11, 16, 7, 3, 14],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(75, 192, 192)',
'rgb(255, 205, 86)',
'rgb(201, 203, 207)',
'rgb(54, 162, 235)'
]
}]
}
});
3.5 雷达图（Radar Chart）
适用场景：显示多个变量的综合对比，常用于性能评估、能力模型等。
new Chart(ctx, {
type: 'radar',
data: {
labels: ['效率', '准确性', '创新', '沟通', '领导力'],
datasets: [{
label: '员工A',
data: [85, 90, 80, 88, 75],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgb(54, 162, 235)',
pointBackgroundColor: 'rgb(54, 162, 235)'
}]
}
});
3.6 散点图/气泡图（Scatter / Bubble Chart）
散点图：用于展示两个变量之间的关系。
气泡图：在散点图的基础上引入第三个维度（用点的大小表示，Bubble Chart），可表达更丰富的数据关系。
四、版本差异详解
如果你正在从旧版本升级，或者维护历史项目，理解版本间的API差异至关重要。
五、交互、动态更新与性能优化
5.1 动态更新数据
Chart.js支持在运行时更新数据，并自动触发平滑的动画过渡。然而，错误的数据更新方式会导致动画失效。
// ❌ 错误方式：直接替换整个data对象（会导致动画丢失）
chart.data = newData;
chart.update();
// ✅ 正确方式：通过数组方法修改数据并调用update()
function updateChart(newData) {
chart.data.datasets[0].data = newData; // 更新数据
chart.data.labels = ['新标签1', '新标签2']; // 更新标签
chart.update(); // 调用update()方法，Chart.js会智能地应用过渡动画[citation:9]
}
5.2 性能优化策略
使用update('none')：当数据未变化，只是因为窗口大小改变需要调整图表时，调用chart.update('none')可以跳过动画，避免不必要的重新渲染。
减少动画复杂度：对于静态图表，设置options.animation = false可以完全禁用动画，提升渲染速度。
使用内部数据格式：通过data.datasets[0].data直接操作数据，跳过初始数据解析步骤，可以提升性能。
5.3 导出图表为图片
// 获取图表的base64数据
const image = canvas.toDataURL('image/png');
// 下载图片
const link = document.createElement('a');
link.download = 'chart.png';
link.href = image;
link.click();
5.4 移动端优化与触摸交互
基础响应式配置：为canvas外层容器设置明确的宽高比，并配置responsive: true, maintainAspectRatio: false。
自定义触摸目标：工具提示、交互点等建议设置最小44px的触摸区域，方便手指触控。
基于屏幕尺寸的动态配置：
const isMobile = window.innerWidth < 768;
const config = {
type: 'bar',
options: {
scales: {
x: {
ticks: {
maxRotation: isMobile ? 0 : 45, // 移动端取消标签旋转
autoSkip: isMobile,
maxTicksLimit: isMobile ? 5 : 10
}
}
}
}
};
5.5 事件监听与设备适配
解决触摸滑动与页面滚动冲突：在高交互图表中，可在特定的触摸区域调用preventDefault()来阻止页面滚动，从而优先响应图表交互。
const canvas = document.getElementById('myChart');
canvas.addEventListener('touchstart', (e) => {
e.preventDefault(); // 仅在需要高频图表交互时使用，慎防阻止页面正常滚动
}, { passive: false });
