强大的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 相关文章推荐
json跟xml的对比分析
Jun 10 Javascript
jQuery EasyUI NumberBox(数字框)的用法
Jul 08 Javascript
只需一行代码,轻松实现一个在线编辑器
Nov 12 Javascript
jquery中JSON的解析方式
Mar 16 Javascript
javascript实现checkbox复选框实例代码
Jan 10 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
Mar 14 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 Javascript
vue子组件使用自定义事件向父组件传递数据
May 27 Javascript
vue在线动态切换主题色方案
Mar 26 Javascript
基于javascript实现放大镜特效
Dec 03 Javascript
详解JavaScript中的this指向问题
Feb 05 Javascript
使用compose函数优化代码提高可读性及扩展性
Jun 16 Javascript
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
linux php mysql数据库备份实现代码
2009/03/10 PHP
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
php运行出现Call to undefined function curl_init()的解决方法
2010/11/02 PHP
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
syntaxhighlighter 使用方法
2007/07/02 Javascript
JQuery 学习笔记01 JQuery初接触
2010/05/06 Javascript
javascript学习(一)构建自己的JS库
2013/01/02 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
js模糊查询实例分享
2016/12/26 Javascript
JS实现复制内容到剪贴板功能
2017/02/05 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
2020/03/28 Javascript
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
vue实现循环切换动画
2018/10/17 Javascript
微信小程序自定义toast弹窗效果的实现代码
2018/11/15 Javascript
JS实现的类似微信聊天效果示例
2019/01/29 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
微信小程序自定义单项选择器样式
2019/07/25 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
2019/12/04 Javascript
pygame学习笔记(2):画点的三种方法和动画实例
2015/04/15 Python
不同版本中Python matplotlib.pyplot.draw()界面绘制异常问题的解决
2017/09/24 Python
python实现简单遗传算法
2018/03/19 Python
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
Django 缓存配置Redis使用详解
2019/07/23 Python
如何使用Python脚本实现文件拷贝
2019/11/20 Python
详解HTML5中垂直上下居中的解决方案
2017/12/20 HTML / CSS
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
蔬菜基地的创业计划书
2014/01/06 职场文书
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
2014年会计个人工作总结
2014/11/24 职场文书
数学教师求职信范文
2015/03/20 职场文书
小兵张嘎电影观后感
2015/06/03 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书
MySQL数据库实验之 触发器和存储过程
2022/06/21 MySQL