详解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之网页换肤实现代码
Apr 30 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
Aug 05 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
Apr 12 Javascript
jQuery中innerWidth()方法用法实例
Jan 19 Javascript
javascript实现验证IP地址等相关信息代码
May 10 Javascript
jquery合并表格中相同文本的相邻单元格
Jul 17 Javascript
基于javascript实现动态显示当前系统时间
Jan 28 Javascript
不使用script导入js文件的几种方法
Oct 27 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
Nov 20 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
May 05 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
vue+node 实现视频在线播放的实例代码
Oct 19 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
smtp邮件发送一例
2006/10/09 PHP
php过滤敏感词的示例
2014/03/31 PHP
PHP 错误处理机制
2015/07/06 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
PHP运行模式汇总
2016/11/06 PHP
老生常谈php中传统验证与thinkphp框架(必看篇)
2017/06/10 PHP
PHP使用redis消息队列发布微博的方法示例
2017/06/22 PHP
解决在laravel中auth建立时候遇到的问题
2019/10/15 PHP
laravel清除视图缓存的代码
2019/10/23 PHP
jquery里的正则表达式说明
2011/08/03 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
jquery查找tr td 示例模拟
2014/05/08 Javascript
使用script的src实现跨域和类似ajax效果
2014/11/10 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
用AngularJS来实现监察表单按钮的禁用效果
2016/11/02 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
js核心基础之构造函数constructor用法实例分析
2019/05/11 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
2019/05/14 jQuery
Vue+Element-U实现分页显示效果
2020/11/15 Javascript
js正则表达式简单校验方法
2021/01/03 Javascript
vue3.0中友好使用antdv示例详解
2021/01/05 Vue.js
Python程序中的观察者模式结构编写示例
2016/05/27 Python
python 定时修改数据库的示例代码
2018/04/08 Python
Python使用pickle模块储存对象操作示例
2018/08/15 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
Python List列表对象内置方法实例详解
2019/10/22 Python
Idea安装python显示无SDK问题解决方案
2020/08/12 Python
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
售后专员岗位职责
2013/12/08 职场文书
销售演讲稿范文
2014/01/08 职场文书
三八红旗手事迹材料
2014/12/26 职场文书
2015年技术员工作总结
2015/04/10 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书
Python趣味挑战之给幼儿园弟弟生成1000道算术题
2021/05/28 Python