详解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 相关文章推荐
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
May 10 Javascript
Javascript 面向对象(二)封装代码
May 23 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
Sep 19 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
Dec 30 Javascript
jQuery中table数据的值拷贝和拆分
Mar 19 Javascript
HTML5开发Kinect体感游戏的实例应用
Sep 18 Javascript
详解vue-cli下ESlint 配置说明
Sep 03 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
Jun 18 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
Nov 04 Javascript
Vuejs中的watch实例详解(监听者)
Jan 05 Javascript
vant实现购物车功能
Jun 29 Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 Javascript
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删除数组中的特定元素的代码
2012/06/28 PHP
PHP利用REFERER根居访问来地址进行页面跳转
2013/09/28 PHP
php一行代码获取文件后缀名实例分析
2014/11/12 PHP
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
php+html5基于websocket实现聊天室的方法
2015/07/17 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
PHP守护进程化在C和PHP环境下的实现
2017/11/21 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
extjs之去除s.gif的影响
2010/12/25 Javascript
jQuery的学习步骤
2011/02/23 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
2011/02/23 Javascript
JQuery的AJAX实现文件下载的小例子
2013/05/15 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
2013/05/28 Javascript
Jquery 动态循环输出表格具体方法
2013/11/23 Javascript
JavaScript的jQuery库插件的简要开发指南
2015/08/12 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
2015/11/18 Javascript
移动手机APP手指滑动切换图片特效附源码下载
2015/11/30 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
解决element-ui的下拉框有值却无法选中的情况
2020/11/07 Javascript
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
快速了解Python相对导入
2018/01/12 Python
Python实现邮件的批量发送的示例代码
2018/01/23 Python
解决Tensorflow使用pip安装后没有model目录的问题
2018/06/13 Python
Python3 读、写Excel文件的操作方法
2018/10/20 Python
django项目环境搭建及在虚拟机本地创建django项目的教程
2019/08/02 Python
python实现邮件自动发送
2019/08/10 Python
基于css3仿造window7的开始菜单
2010/06/17 HTML / CSS
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
大专生毕业的自我评价
2014/02/06 职场文书
大学生自我鉴定书
2014/03/24 职场文书
Mysql官方性能测试工具mysqlslap的使用简介
2021/05/21 MySQL