前言
最近项目中遇到一个在页面中画图表的需求, 需要一个扇状图和一个柱状图, 虽然能使用 svg 或 canvas 绘制, 但吃力还不一定讨好, 所以研究接入了主流的第三方图表库供项目使用. 下面主要记录我使用过程中的一些体验和解决方法, 具体教程请移步官方文档.
技术选型
研究了 Highcharts http://www.hcharts.cn/ , 百度的 ECharts http://echarts.baidu.com/ , 阿里的 G2 https://antv.alipay.com/zh-cn/g2/3.x/index.html 和 Charts.js http://www.chartjs.org/ 四个图表库, 由于项目对图表需求不大, 图表不复杂, 所以引入了轻量级的 Charts.js.Chart.js 很容易上手, 只需要在页面中引用脚本文件, 并创建 <canvas> 节点即可渲染出图表. 且为你的数据提供 8 种可视化展现方式, 每种方式都具有动态效果并且可定制; 在所有现代浏览器 (IE9+) 上都有高效的绘图效率; 响应式布局.
GitHub 源码: https://github.com/nnnick/Chart.js
Chart.js 文档: http://www.bootCSS.com/p/chart.js/
引入
GitHUb https://github.com/chartjs/Chart.js 上下载源码, 把里面的 dist/Chart.bundle.js 文件引入项目即可使用; 查看源码, 发现其兼容了多种模块加载方式, 所以我使用 requireJs 在页面中加载.
使用经验
图表颜色值个数可以不与数据个数相等, 如
- var pieConfig = {
- type: 'pie',
- data: {
- datasets: [{
- data: [10, 20],
- backgroundColor: ['#debd5a', '#ff6d4a', '#3cc9bf', '#7599e9',]
- }]
- }
- }
可以取消响应式 options: {responsive: false}, 方便控制图表的大小, canvas 多大图表便多大, canvas 不会自动占满外层容器.
取消 legend 的点击事件, 因为点击 legend 会默认隐藏该数据的占比, 所以我需要去掉点击事件, 设置 legend: {onClick: function () {}}, 修改点击事件.
把 legend 由默认的矩形修改成正方形, 设置 legend 的字体大小和色值
- 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 + '个' ;
- }
- }
- }
效果如下
总结
语言功底有限, 表达不到位敬请原谅, 本文主要作为自己项目总结使用. 以上就是本文的全部内容, 希望对大家的学习有所帮助, 也希望大家多多支持脚本之家.
来源: http://www.jb51.net/article/140612.htm