轻量级的绘制图表js库--Morris.js
Morris.js 是一个轻量级的 JS 库,使用 jQuery 和 Raphaël 来生成各种时序图。
虽说现在移动手机网络已经到了4G,但是在移动web客户端开发过中,为了达到良好的体验效果,需要考虑很多的因素,比如板式,网速等等,最近有个任务需要在移动端显示<span>标签的内容,所有找js类的开源库,最终选择Morris.js ,一个是小,另外是支持移动包括iso和android,项目地址:点击打开链接,相比其他的开源库,这个上手还是比较简单的,可以看看官方的例子,但是有一些需要注意的地方:貌似x轴只能是已时间/日期为单位的(哈哈,还好我不要求)
第一步,导入相应的js文件:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
由于我的是在jsp页面调用的,一开始用相对路径死活都不出效果,后来查了一些资料才知道jsp页面下不能访问对应的路径,所以只能子啊web-inf/static文件夹下引用了,这个应该是可以的,因为该目录下都是一些网站用到的js。
第二步,在body标签内添加一个你需要放图的<div>标签,并添加相对应的id
<div id="myfirstchart" style="height: 250px;"></div>
第三步,就是写javascript代码了,参考实例:
<pre name="code" class="html">new Morris.Line({
// ID of the element in which to draw the chart.
element: 'myfirstchart',
// Chart data records -- each entry in this array corresponds to a point on
// the chart.
data: [
{ year: '2008', value: 20 },
{ year: '2009', value: 10 },
{ year: '2010', value: 5 },
{ year: '2011', value: 5 },
{ year: '2012', value: 20 }
],
// The name of the data record attribute that contains x-values.
xkey: 'year',
// A list of names of data record attributes that contain y-values.
ykeys: ['value'],
// Labels for the ykeys -- will be displayed when you hover over the
// chart.
labels: ['Value']
});
注意有时候希望横坐标不转换成对应的时间,可以加上
parseTime: false
参考的;例子如下:
/* data stolen from http://howmanyleft.co.uk/vehicle/jaguar_'e'_type */
var month_data = [
{"period": "2012-10", "licensed": 3407, "sorned": 660},
{"period": "2011-08", "licensed": 3351, "sorned": 629},
{"period": "2011-03", "licensed": 3269, "sorned": 618},
{"period": "2010-08", "licensed": 3246, "sorned": 661},
{"period": "2010-05", "licensed": 3257, "sorned": 667},
{"period": "2010-03", "licensed": 3248, "sorned": 627},
{"period": "2010-01", "licensed": 3171, "sorned": 660},
{"period": "2009-12", "licensed": 3171, "sorned": 676},
{"period": "2009-10", "licensed": 3201, "sorned": 656},
{"period": "2009-09", "licensed": 3215, "sorned": 622}
];
Morris.Line({
element: 'graph',
data: month_data,
xkey: 'period',
ykeys: ['licensed', 'sorned'],
labels: ['Licensed', 'SORN'],
smooth: false
});
放一张效果图:
轻量级的绘制图表js库--Morris.js的更多相关文章
- 如何写JS库,JS库写法
前言: 现在javascript库特别多,其写法各式各样,总结几种我们经常见到的,作为自己知识的积累.而目前版本的 JavaScript 并未提供一种原生的.语言级别的模块化组织模式,而是将模块化的方 ...
- 前端学习-使用JS库Leaflet.js生成世界地图并获取标注地址经纬度。
介绍:Leaflet是一个开源的JavaScript库,对移动端友好且对地图有很好的交互性. 大小仅仅只有 33 KB, 同时具有大多数地图所需要的特点. Leaflet设计的非常简单易懂, 同时具有 ...
- 移动开发js库Zepto.js使用中的一些注意点
来自http://chaoskeh.com/blog/some-experience-of-using-zepto.html的参考. 前段时间完成了公司一个产品的 HTML5 触屏版,开发中使用了 Z ...
- 移动开发js库Zepto.js应用详解
从哪里下载 Zepto 地址:http://zeptojs.com/ 中文版地址:http://www.css88.com/doc/zeptojs_api/ 这个问题看起来很蠢,从官网下载不就行了嘛! ...
- Morris.js和flot绘制折线图的比较
[文章摘要] 最近用开源的AdminLTE做框架感觉效果特别好,其针对图表库Morris.js和flot都提供了不错的支持,也都提供了这两者的例子.不过Morris.js是基于Raphael.js来的 ...
- 创建自己的共用js库
直至昨晚为止,学习了一个多月的MVC与jQuery,从所做的练习中,发觉jQuery的代码也有跟C#语言一样可以重构,多页面有相同使用的方法函数,均可以放置于一个单独立的js文件或是自定义的js库中. ...
- 数字格式化的 js 库
数字格式化的 js 库 Numeral.js,是一个用于格式化数字和处理数字的 js 库. Tip:目前 Star 有 9.2k,5年以前就没有在更新.其文档写得不很清晰,比如它提供了多语言,但如何切 ...
- js——移动端js事件、zepto.js
1. touchstart : 手指放到屏幕上时触发 2. touchmove : 手指在屏幕上滑动时触发 3. touched : 手指离开屏幕时触发 4. touchcancel : 系统取消to ...
- 玩node-images模块---Node.js轻量级跨平台图像编解码库
Node.js轻量级跨平台图像编解码库 github:https://github.com/zhangyuanwei/node-images Features 功能特性 轻量级:无需安装任何图像处理库 ...
随机推荐
- 【Lintcode】098.Sort List
题目: Sort a linked list in O(n log n) time using constant space complexity. Example Given 1->3-> ...
- 数据结构与算法(3)----->队列和栈
1. 栈和队列的基本性质 栈是先进后出;(像是子弹夹,后进先打出) 队列是先进先出;(像是平时排队买冰淇淋,按顺序轮流) 栈和队列在实现的结构上可以有数组和链表两种形式; (1)数组结构实现容易; ( ...
- mysql建表练习
create table class( cid int primary key auto_increment, caption ) not null )engine=innodb; create ta ...
- Scala学习——操作符(初)
经常看到却反应不出来的(->) val a = 2 val b = a->4 //表示生成一个tuple println(b._1+" "b._2) //2 4
- Java Security(JCE基本概念)
Java Security网络环境中的安全隐患计算机安全OSI参考结构模型五类安全服务八类安全机制网络环境中的安全隐患1. 存储问题: 移动存储设备存储数据没有加密存在的安全隐患 2. 通信问题: 用 ...
- [poj1830]开关问题(高斯消元)
题意:求高斯消元中自由元的个数,输出1<<ans; #include<cstdio> #include<cstdlib> #include<cstring&g ...
- 测试你开发的web系统在各种类型浏览器上的兼容性
可以使用 https://www.browserstack.com 来测试你所开发的web系统在各种各样的浏览器,以及各种手机平台上的兼容性.
- poj2449(k短路&A_star模板)
题目链接:http://poj.org/problem?id=2449 题意:给出一个有向图,求s到t的第k短路: 思路:k短路模板题,可以用A_star模板过: 单源点最短路径+高级搜索A*;A*算 ...
- solidity 学习笔记 2 (二维数组)
solidity 二维数组: pragma solidity ^0.4.23; contract twoArray{ uint[2][3] grade =[[20,30],[40,50],[45,60 ...
- 平衡的阵容 st表学习
模板 预处理 void rmq_isit() { ;i<=n;i++) mx[i][]=mn[i][]=a[i]; ;(<<j)<=n;j++) ;i+(<<j)- ...