本文总结Chart.js轻量级图表库在项目中的实际应用经验。针对扇形图和柱状图的需求，详细讲解了如何引入库文件、配置颜色与数据对应关系、关闭响应式布局以固定大小、自定义图例样式及交互、去除网格线并调整坐标轴，以及为Tooltip添加单位等具体操作。内容基于Chart.js 2.0版本，提供有效配置代码供参考。
前言与背景
前言
近期项目中需要实现页面图表展示，具体包括扇形图和柱状图。虽然可以通过SVG或Canvas手动绘制，但开发成本高且效果难以保证，因此决定引入成熟的第三方图表库。本文主要记录使用过程中的体验与解决方案，详细教程建议参考官方文档。
技术选型与引入
技术选型
经过对Highcharts、百度ECharts、阿里G2以及Chart.js四款主流图表库的对比研究，考虑到项目对图表复杂度要求不高，最终选择了轻量级的Chart.js。该库上手简单，仅需在页面引用脚本并创建<canvas>节点即可渲染。它支持8种可视化类型，均具备动态效果且可定制，能在IE9及以上现代浏览器中高效运行，并支持响应式布局。
GitHub源码： https://github.com/nnnick/Chart.js Chart.js文档：http://www.bootcss.com/p/chart.js/
引入
从GitHub下载源码后，直接引入dist/Chart.bundle.js文件即可使用。通过查看源码可知，该库兼容多种模块加载方式，本文示例中采用requireJs在页面中进行加载。
Chart.js 配置实战
使用经验
①图表颜色值的数量无需与数据项数量完全一致，例如：
var pieConfig = {
type: 'pie',
data: {
datasets: [{
data: [10, 20],
backgroundColor: ['#debd5a', '#ff6d4a', '#3cc9bf', '#7599e9',]
}]
}
}
②可通过设置options: {responsive: false}来禁用响应式功能，从而更灵活地控制图表尺寸。此时图表大小将与canvas元素一致，且不会自动撑满外层容器。
③若需取消图例（legend）的点击事件，因为默认点击图例会隐藏对应数据占比，可通过设置legend: {onClick: function () {}}来移除默认行为或修改点击逻辑。
④将默认的矩形图例修改为正方形，并设置图例的字体大小和颜色。
options: {
legend: {
position: 'right',
labels: {
boxWidth: 14,// 修改宽度
fontSize: 14,
fontColor: '#666666'
}
}
效果如下
⑤在柱状图中去除网格线，设置轴线颜色、矩形宽度，并确保y轴数据从0开始展示。由于使用的是Chart.js 2.0版本，配置参数变化较大，网上许多示例已失效，此处提供有效的配置代码。
options: {
scales: {
xAxes: [{
gridLines: {
color: 'rgba(0, 0, 0, 0)',// 隐藏x轴方向轴线
zeroLineColor: '#666666'// 设置轴颜色
},
barPercentage: 0.2,// 设置柱宽度
ticks: {// 设置轴文字字号和色值
fontSize: 12,
fontColor: '#666666'
}
}],
yAxes: [{
gridLines: {
color: 'rgba(0, 0, 0, 0)',// 隐藏要y轴轴线
zeroLineColor: '#666666'
},
ticks: {
fontSize: 12,
beginAtZero: true,// y轴数据从0开始展示
fontColor: '#666666'
}
}]
}
}
效果如下
⑥若需为图表的tooltips数据添加单位，可通过tooltips的callback函数进行设置。
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] + '%';
var title = data.labels[tooltipItem.index] + ':';
return title + value;
}
}
}效果如下
tooltips: {
callbacks: {
label: function (tooptipItem) {
return tooptipItem.yLabel + '个' ;
}
}
}效果如下
总结
由于作者表达能力有限，文中如有不妥之处敬请谅解。本文主要作为个人项目经验的总结，希望能对读者有所帮助，也欢迎大家支持本站。