详解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 相关文章推荐
IE8下关于querySelectorAll()的问题
May 13 Javascript
基于jquery的表头固定的若干方法
Jan 27 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
Sep 27 Javascript
javascript 实现子父窗体互相传值的简单实例
Feb 17 Javascript
jQuery学习笔记之总体架构
Jun 03 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 Javascript
纯JS代码实现气泡效果
May 04 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
Mar 17 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
Jul 31 Javascript
vue打包之后生成一个配置文件修改接口的方法
Dec 09 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
Jan 02 Javascript
js中Object.create实例用法详解
Oct 05 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生成自定义长度随机字符串的函数分享
2014/05/04 PHP
Yii2使用自带的UploadedFile实现的文件上传
2016/06/20 PHP
Yii2第三方类库插件Imagine的安装和使用
2017/07/06 PHP
JavaScript多线程的实现方法
2007/05/08 Javascript
一个原生的用户等级的进度条
2010/07/03 Javascript
地址栏传递中文参数乱码在js里用escape转码
2013/08/28 Javascript
Angular用来控制元素的展示与否的原生指令介绍
2015/01/07 Javascript
JavaScript中的Math.LOG2E属性使用详解
2015/06/14 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
轻松掌握JavaScript单例模式
2016/08/25 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
使用DeviceOne实现微信小程序功能
2016/12/29 Javascript
ES6中Proxy代理用法实例浅析
2017/04/06 Javascript
js实现图片粘贴上传到服务器并展示的实例
2017/11/08 Javascript
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
JavaScript实现简单的图片切换功能(实例代码)
2020/04/10 Javascript
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
Python中列表元素转为数字的方法分析
2016/06/14 Python
django+mysql的使用示例
2018/11/23 Python
Python 做曲线拟合和求积分的方法
2018/12/29 Python
Python魔术方法专题
2020/06/19 Python
python opencv图像处理(素描、怀旧、光照、流年、滤镜 原理及实现)
2020/12/10 Python
Omio荷兰:预订火车、巴士和机票
2018/11/04 全球购物
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
户外拓展活动方案
2014/02/11 职场文书
七一建党节演讲稿
2014/09/11 职场文书
物理分数没达标检讨书
2014/09/13 职场文书
2014年小学国庆节活动方案
2014/09/16 职场文书
民主评议政风行风活动心得体会
2014/10/29 职场文书
大学校园招聘会感想
2015/08/10 职场文书
Python借助with语句实现代码段只执行有限次
2022/03/23 Python
Python测试框架pytest核心库pluggy详解
2022/08/05 Golang