详解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 相关文章推荐
seajs1.3.0源码解析之module依赖有序加载
Nov 07 Javascript
jquery easyui combobox模糊过滤(示例代码)
Nov 30 Javascript
jQuery使用$.ajax提交表单完整实例
Dec 11 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
Dec 17 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
Mar 21 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
Oct 10 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
Jan 22 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
Apr 26 Javascript
JS数组交集、并集、差集的示例代码
Aug 23 Javascript
layer.open 按钮的点击事件关闭方法
Aug 17 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
Apr 02 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数组
2006/10/09 PHP
php的ajax框架xajax入门与试用介绍
2010/12/19 PHP
基于PHP读取TXT文件向数据库导入海量数据的方法
2013/04/23 PHP
Android App中DrawerLayout抽屉效果的菜单编写实例
2016/03/21 PHP
Smarty模板简单配置与使用方法示例
2016/05/23 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
2007/04/20 Javascript
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
2009/11/12 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
JavaScript window.location对象
2014/11/14 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
JQuery给select添加/删除节点的实现代码
2016/04/26 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
详谈innerHTML innerText的使用和区别
2017/08/18 Javascript
vue webuploader 文件上传组件开发
2017/09/23 Javascript
babel的使用及安装配置教程
2018/02/22 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
微信小程序通过websocket实时语音识别的实现代码
2020/08/19 Javascript
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python列表推导式的使用方法
2013/11/21 Python
Python实现的质因式分解算法示例
2018/05/03 Python
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
pyqt5与matplotlib的完美结合实例
2019/06/21 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
Python实现点云投影到平面显示
2020/01/18 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
什么是Python中的匿名函数
2020/06/02 Python
python中编写函数并调用的知识点总结
2021/01/13 Python
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
公司合作意向书
2014/04/01 职场文书
初一新生军训方案
2014/05/22 职场文书
环境保护与污染治理求职信
2014/07/16 职场文书
医院深入开展党的群众路线教育实践活动实施方案
2014/08/27 职场文书
务工证明怎么写
2015/06/18 职场文书
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL