详解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 hashtable实现代码
Oct 13 Javascript
前后台交互过程中json格式如何解析以及如何生成
Dec 26 Javascript
jQuery实现用户注册的表单验证示例
Aug 28 Javascript
jQuery简单实现banner图片切换
Jan 02 Javascript
JavaScript匿名函数用法分析
Feb 13 Javascript
JS实现图片放大镜效果的方法
Feb 27 Javascript
JavaScript实现图片自动加载的瀑布流效果
Apr 11 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
Apr 13 Javascript
jQuery AJAX timeout 超时问题详解
Jun 21 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
Sep 12 Javascript
Webpack设置环境变量的一些误区详解
Dec 19 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 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分页集合包括使用方法
2013/10/21 PHP
PHP的switch判断语句的“高级”用法详解
2014/10/01 PHP
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
JavaScript 布尔操作符解析  &amp;&amp; || !
2012/08/10 Javascript
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
2015/09/15 Javascript
详解JavaScript的回调函数
2015/11/20 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
JavaScript几种数组去掉重复值的方法推荐
2016/04/12 Javascript
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
浅谈javascript中的事件冒泡和事件捕获
2016/12/28 Javascript
使用JS 插件qrcode.js生成二维码功能
2017/02/20 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
BootStrap 页签切换失效的解决方法
2017/08/17 Javascript
原生JS实现日历组件的示例代码
2017/09/22 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
JavaScript调用模式与this关键字绑定的关系
2018/04/21 Javascript
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
js 动态校验开始结束时间的实现代码
2020/05/25 Javascript
[00:57]深扒TI7聊天轮盘语音出处5
2017/05/11 DOTA
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
200行python代码实现贪吃蛇游戏
2020/04/24 Python
基于python图书馆管理系统设计实例详解
2020/08/05 Python
python将下载到本地m3u8视频合成MP4的代码详解
2020/11/24 Python
Myprotein蛋白粉美国官网:欧洲畅销运动营养品牌
2016/11/15 全球购物
Nike加拿大官网:Nike.com (CA)
2019/04/09 全球购物
留学推荐信怎么写
2014/01/25 职场文书
伊琍体标语
2014/06/25 职场文书
数学教育专业求职信
2014/07/22 职场文书
vue backtop组件的实现完整代码
2021/04/07 Vue.js
redis实现共同好友的思路详解
2021/05/26 Redis