六、主题定制
6.1 全局样式配置
// 设置全局默认配置
Chart.defaults.set({
font: {
family: "'Noto Sans SC', 'Microsoft YaHei', sans-serif",
size: 12
},
color: '#666',
animation: {
duration: 800,
easing: 'easeOutQuart' // 缓动函数[citation:2]
}
});
6.2 单个图表配置覆写
单个图表的配置会与全局配置进行深度合并，相同属性会被覆写。
new Chart(ctx, {
type: 'bar',
data: data,
options: {
plugins: {
legend: {
position: 'bottom' // 图例位置
},
tooltip: {
enabled: true,
callbacks: {
label: (context) => `${context.dataset.label}: ${context.raw}元`
}
}
},
scales: {
y: {
title: {
display: true,
text: '金额（元）'
}
}
}
}
});
七、插件系统
Chart.js的插件系统允许开发者自定义或更改图表行为，是扩展图表功能的利器。
7.1 插件核心概念
插件ID：必须定义一个唯一的ID，用于配置和识别。ID不能以点或下划线开头，只能包含URL安全字符。
插件钩子：插件可以在图表生命周期（初始化、更新、渲染、销毁）的不同阶段接收通知。
7.2 常用社区插件
7.3 自定义插件示例
const myPlugin = {
id: 'my-custom-plugin',
beforeDraw: (chart, args, options) => {
// 在绘制图表前执行
const { ctx, chartArea: { top, right, bottom, left } } = chart;
ctx.fillStyle = options.backgroundColor || '#f0f0f0';
ctx.fillRect(left, top, right - left, bottom - top);
},
defaults: {
backgroundColor: '#f0f0f0' // 默认配置
}
};
// 注册插件
Chart.register(myPlugin);
// 在图表实例中使用
new Chart(ctx, {
plugins: [myPlugin],
options: {
plugins: {
'my-custom-plugin': { backgroundColor: '#ffe0e0' }
}
}
});
7.4 按需注册
通过只注册必要的组件，可以有效优化打包体积。
import { Chart, LineController, CategoryScale, LinearScale, PointElement, LineElement } from 'chart.js';
Chart.register(LineController, CategoryScale, LinearScale, PointElement, LineElement);
new Chart(ctx, {
type: 'line', // 折线图
data: data
});
八、常见问题与解决方案
8.1 图表在高DPI屏幕上模糊
Chart.js渲染可能会在高DPI屏幕上出现模糊，将canvas元素的width/height属性设置为预期显示尺寸的2倍，再通过CSS缩放回来即可解决。
<!-- width/height属性设为目标尺寸的2倍，CSS宽高设为目标尺寸 -->
<canvas id="myChart" width="800" height="400" style="width: 400px; height: 200px;"></canvas>
8.2 图表不显示或尺寸异常
必须为canvas设置明确的外层容器宽高，并确保responsive: true且maintainAspectRatio按需设置。
.chart-container {
position: relative;
width: 100%;
height: 400px; /* 必须指定高度或宽高比 */
}
8.3 数据量过大导致性能下降
Chart.js v4优化了渲染引擎，性能远超旧版。对于静态图表可禁用动画；也可使用chartjs-plugin-deferred实现视口懒加载。
来源：
http://htnus.cn
