详解Chart.js轻量级图表库的使用经验


Posted in Javascript onMay 22, 2018

前言

最近项目中遇到一个在页面中画图表的需求,需要一个扇状图和一个柱状图,虽然能使用svg或canvas绘制,但吃力还不一定讨好,所以研究接入了主流的第三方图表库供项目使用。下面主要记录我使用过程中的一些体验和解决方法,具体教程请移步官方文档。

技术选型

研究了Highcharts、百度的ECharts、阿里的G2和Charts.js四个图表库,由于项目对图表需求不大,图表不复杂,所以引入了轻量级的Charts.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在页面中加载。

使用经验

①图表颜色值个数可以不与数据个数相等,如

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'
   }
}

效果如下

详解Chart.js轻量级图表库的使用经验

⑤柱状图去掉网格线,设置轴线颜色、矩形的宽度和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'
      }
   }]
  }
}

效果如下

详解Chart.js轻量级图表库的使用经验

⑥给图表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;
   }
  }
}

效果如下

详解Chart.js轻量级图表库的使用经验

tooltips: {
  callbacks: {
   label: function (tooptipItem) {
    return tooptipItem.yLabel + '个' ;
   }
  }
}

效果如下

详解Chart.js轻量级图表库的使用经验

总结

语言功底有限,表达不到位敬请原谅,本文主要作为自己项目总结使用。以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript编程起步(第七课)
Jan 10 Javascript
js获取url参数的使用扩展实例
Dec 29 Javascript
CSS常用网站布局实例
Apr 03 Javascript
javaScript checkbox 全选/反选及批量删除
Apr 28 Javascript
jquery css 设置table的奇偶行背景色示例
Jun 03 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
Dec 15 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 Javascript
微信小程序tabBar用法实例详解
Dec 04 Javascript
微信小程序 授权登录详解(附完整源码)
Aug 23 Javascript
使用typescript快速开发一个cli的实现示例
Dec 09 Javascript
vue3中provide && inject的使用
Jul 01 Vue.js
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
VUE2.0中Jsonp的使用方法
May 22 #Javascript
mpvue构建小程序的方法(步骤+地址)
May 22 #Javascript
基于mpvue的小程序项目搭建的步骤
May 22 #Javascript
安装vue-cli的简易过程
May 22 #Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
May 22 #Javascript
Vue单页及多页应用全局配置404页面实践记录
May 22 #Javascript
Vue页面骨架屏的实现方法
May 22 #Javascript
You might like
PHP 创建标签云函数代码
2010/05/26 PHP
codeigniter中测试通过的分页类示例
2014/04/17 PHP
PHP+jQuery 注册模块开发详解
2014/10/14 PHP
教你识别简单的免查杀PHP后门
2015/09/13 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
jQuery使用CSS()方法给指定元素同时设置多个样式
2015/03/26 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
自定义vue全局组件use使用、vuex的使用详解
2017/06/14 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
webpack的tree shaking的实现方法
2019/09/18 Javascript
js实现点击生成随机div
2020/01/16 Javascript
JavaScript常用8种数组去重代码实例
2020/09/09 Javascript
PHP 502bad gateway原因及解决方案
2020/11/13 Javascript
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
Python程序设计入门(2)变量类型简介
2014/06/16 Python
Python中的ConfigParser模块使用详解
2015/05/04 Python
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
Flask和Django框架中自定义模型类的表名、父类相关问题分析
2018/07/19 Python
python3字符串输出常见面试题总结
2020/12/01 Python
应届生简历中的自我评价
2014/01/13 职场文书
九年级语文教学反思
2014/02/04 职场文书
爱国主义演讲稿
2014/05/07 职场文书
森林病虫害防治方案
2014/06/02 职场文书
关于读书的演讲稿500字
2014/08/27 职场文书
《我爱祖国》演讲稿1000字
2014/09/26 职场文书
行政主管岗位职责
2015/02/03 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书
三潭印月的导游词
2015/02/12 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
业务员管理制度范本
2015/08/06 职场文书
《天净沙·秋思》教学反思三篇
2019/11/02 职场文书
Mysql存储过程、触发器、事件调度器使用入门指南
2022/01/22 MySQL