强大的JavaScript响应式图表Chartist.js的使用


Posted in Javascript onSeptember 13, 2017

Chartist.js是一个非常简单而且实用的JavaScript前端图表生成器,它支持SVG格式,图表数据转换十分灵活,同时也支持多种图表展现形式,不失为一款前端开发者的开发利器。

Chartist.js的特点

  • 配置十分简单,可以很方便地转换各种图表数据格式。
  • CSS和JavaScript分离,因此代码比较简洁,使用就相对方便。
  • 使用SVG格式,因此Chartist.js可以很灵活的在Web页面上应用。
  • 响应式图表,支持不同的浏览器尺寸和分辨率。
  • 支持自定义 SASS 架构。

强大的JavaScript响应式图表Chartist.js的使用

Chartist.js的使用方法

首先你需要在其官方网站中下载JS包和CSS包,并且在页面中引用它们:

<link rel="stylesheet" href="bower_components/chartist/dist/chartist.min.css" rel="external nofollow" >
<script src="bower_components/chartist/dist/chartist.min.js">

下面我们对一些常用的图表类型做一个简单的介绍。

带Tooltip提示的线形图

效果图:

强大的JavaScript响应式图表Chartist.js的使用

JavaScript代码:

new Chartist.Line('.ct-chart', {
 labels: ['1', '2', '3', '4', '5', '6'],
 series: [
  {
   name: 'Fibonacci sequence',
   data: [1, 2, 3, 5, 8, 13]
  },
  {
   name: 'Golden section',
   data: [1, 1.618, 2.618, 4.236, 6.854, 11.09]
  }
 ]
});

var easeOutQuad = function (x, t, b, c, d) {
 return -c * (t /= d) * (t - 2) + b;
};

var $chart = $('.ct-chart');

var $toolTip = $chart
 .append('<div class="tooltip"></div>')
 .find('.tooltip')
 .hide();

$chart.on('mouseenter', '.ct-point', function() {
 var $point = $(this),
  value = $point.attr('ct:value'),
  seriesName = $point.parent().attr('ct:series-name');

 $point.animate({'stroke-width': '50px'}, 300, easeOutQuad);
 $toolTip.html(seriesName + '<br>' + value).show();
});

$chart.on('mouseleave', '.ct-point', function() {
 var $point = $(this);

 $point.animate({'stroke-width': '20px'}, 300, easeOutQuad);
 $toolTip.hide();
});

$chart.on('mousemove', function(event) {
 $toolTip.css({
  left: (event.offsetX || event.originalEvent.layerX) - $toolTip.width() / 2 - 10,
  top: (event.offsetY || event.originalEvent.layerY) - $toolTip.height() - 40
 });
});

多维度的柱形图

效果图:

强大的JavaScript响应式图表Chartist.js的使用

JavaScript代码:

new Chartist.Bar('.ct-chart', {
 labels: ['First quarter of the year', 'Second quarter of the year', 'Third quarter of the year', 'Fourth quarter of the year'],
 series: [
  [60000, 40000, 80000, 70000],
  [40000, 30000, 70000, 65000],
  [8000, 3000, 10000, 6000]
 ]
}, {
 seriesBarDistance: 10,
 axisX: {
  offset: 60
 },
 axisY: {
  offset: 80,
  labelInterpolationFnc: function(value) {
   return value + ' CHF'
  },
  scaleMinSpace: 15
 }
});

简单的饼图

效果图:

 强大的JavaScript响应式图表Chartist.js的使用

JavaScript代码:

var data = {
 labels: ['Bananas', 'Apples', 'Grapes'],
 series: [20, 15, 40]
};

var options = {
 labelInterpolationFnc: function(value) {
  return value[0]
 }
};

var responsiveOptions = [
 ['screen and (min-width: 640px)', {
  chartPadding: 30,
  labelOffset: 100,
  labelDirection: 'explode',
  labelInterpolationFnc: function(value) {
   return value;
  }
 }],
 ['screen and (min-width: 1024px)', {
  labelOffset: 80,
  chartPadding: 20
 }]
];

new Chartist.Pie('.ct-chart', data, options, responsiveOptions);

更多关于Chartist.js的用法,可以前往其官方网站进行查阅,包括详细地API。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery ready(fn)事件使用介绍
Aug 21 Javascript
jquery常用方法及使用示例汇总
Nov 08 Javascript
js实现索引图片切换效果
Nov 21 Javascript
JavaScript设计模式经典之命令模式
Feb 24 Javascript
HTML页面,测试JS对C函数的调用简单实例
Aug 09 Javascript
正则中的回溯定义与用法分析【JS与java实现】
Dec 27 Javascript
BootStrap Fileinput初始化时的一些参数
Dec 30 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
vue 实现的树形菜的实例代码
Mar 19 Javascript
详解基于React.js和Node.js的SSR实现方案
Mar 21 Javascript
微信小程序云开发详细教程
May 16 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
JS库之Waypoints的用法详解
Sep 13 #Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 #Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
Sep 13 #Javascript
基于vue的短信验证码倒计时demo
Sep 13 #Javascript
BootStrap数据表格实例代码
Sep 13 #Javascript
使用Fullpage插件快速开发整屏翻页的页面
Sep 13 #Javascript
Angular CLI 安装和使用教程
Sep 13 #Javascript
You might like
一个分页的论坛
2006/10/09 PHP
javascript 函数使用说明
2010/04/07 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
2010/04/18 Javascript
jQuery UI AutoComplete 使用说明
2011/06/20 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
2013/02/05 Javascript
JS中如何设置readOnly的值
2013/12/25 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
JQuery悬停控制图片轮播——代码简单
2015/08/05 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
2015/08/07 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
学习 NodeJS 第八天:Socket 通讯实例
2016/12/21 NodeJs
详解vue.js全局组件和局部组件
2017/04/10 Javascript
nodejs接入阿里大鱼短信验证码的方法
2017/07/10 NodeJs
vue使用axios时关于this的指向问题详解
2017/12/22 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
详解python字节码
2018/02/07 Python
Pyinstaller将py打包成exe的实例
2018/03/31 Python
一行代码让 Python 的运行速度提高100倍
2018/10/08 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
Python实时监控网站浏览记录实现过程详解
2020/07/14 Python
如何用 Python 处理不平衡数据集
2021/01/04 Python
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
优秀毕业自我鉴定
2014/02/15 职场文书
毕业生如何写自荐信
2014/03/26 职场文书
美容院店长岗位职责
2014/04/08 职场文书
煤矿安全知识竞赛活动总结
2014/07/07 职场文书
民主生活会对照检查材料思想汇报
2014/09/27 职场文书
工资收入证明
2014/10/07 职场文书
人事文员岗位职责
2015/02/04 职场文书
社区党支部承诺书
2015/04/29 职场文书
导游词之山西关帝庙
2019/11/01 职场文书
mybatis 获取更新记录的id
2022/05/20 Java/Android