morris.js是一个轻量级的时间序列javascript类库,是网页显示图表的好工具。github项目地址:点击打开,使用起来很简单,但是需要你有一点网页设计的一些基本知识,对一个网页内容的结构要有一定的了解。可以从项目地址下载下来,然后在网页的<head>标签内导入相应的js文件,类似这样的(注意你的目录路径):

  <script src="js/jquery.min.js"></script>
<script src="js/raphael-min.js"></script>
<script src="js/morris.min.js"></script>

具体使用的方法你可以参考官方给的范例,这里就不多说了,说下我遇到的问题,主要是我获取的到的信息的格式问题,morris.js加载的一条信息一般是这样的:

["year: '2007' ","value1:30","value2:15"]   ["year: '2008' ","value1:18","value2:20"]

而我的数据是["year:'2007'", "year:'2009'"] ["value:30", "value:20"] ["value2:30", "value2:20"],对于一些数据量小的,到是无所谓可以用笨的方法,但是数据量太大的时候,就显的很麻烦了,应该这里讲的主要是数组的转置功能在javascript下的实现:

先看自带的数据的现充:

<!doctype html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<script src="../morris.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.js"></script>
<script src="lib/example.js"></script>
<link rel="stylesheet" href="lib/example.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.css">
<link rel="stylesheet" href="../morris.css">
</head>
<body>
<h1>Formatting Dates YYYY</h1>
<div id="graph"></div>
<pre id="code" class="prettyprint linenums">
/* data stolen from http://howmanyleft.co.uk/vehicle/jaguar_'e'_type */
var year_data = [
{"period": "2012", "licensed": 3407, "sorned": 660},
{"period": "2011", "licensed": 3351, "sorned": 629},
{"period": "2010", "licensed": 3269, "sorned": 618},
{"period": "2009", "licensed": 3246, "sorned": 661},
{"period": "2008", "licensed": 3257, "sorned": 667},
{"period": "2007", "licensed": 3248, "sorned": 627},
{"period": "2006", "licensed": 3171, "sorned": 660},
{"period": "2005", "licensed": 3171, "sorned": 676},
{"period": "2004", "licensed": 3201, "sorned": 656},
{"period": "2003", "licensed": 3215, "sorned": 622}
];
Morris.Line({
element: 'graph',
data: year_data,
xkey: 'period',
ykeys: ['licensed', 'sorned'],
labels: ['Licensed', 'SORN']
});
</pre>
</body>

效果图:

我实现的方式好像和上面还不一样,我的是在javascript中填充数据的,这个数据在量小的情况下可以满足需求,但是遇到我这种情况并且是大数量的话就必须自己写了:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/morris.css" />
<script src="js/jquery.min.js"></script>
<script src="js/raphael-min.js"></script>
<script src="js/morris.min.js"></script>
<script type="text/javascript">
var a = new Array();//原来是3x2
a[0] = new Array("year:'2007'", "year:'2009'");//如果需要X坐标反置的话,用reverse()函数
a[1] = new Array("value:30", "value:20");
a[2] = new Array("value2:30", "value2:20");
var result=new Array();
//创建二维数组,相当于a=[a[0],a[1]....]
for (var j=0;j<a[0].length;j++) {//列的变化
result[j]=new Array();
for (var i=0;i<a.length;i++) {//按<列>取值放入数组中
result[j].push(a[i][j]);//变量i为对应行数坐标
}
}
//alert(a[0].length);
$(document).ready(function () {
var obj = new Object();
var arr = [];
for (var h=0;h<a[0].length;h++) {
//var define = "{"+result[1].toString()+"}";
obj[h] = eval('(' + "{"+result[a[0].length-h-1].toString()+"}" + ')');
arr.push(obj[h])
}
//alert(arr.join());
new Morris.Line({
element: 'myfirstchart',
data: arr,//注意这里的写的形式和原来的对比下
xkey: 'year',
ykeys: ['value','value2'],
labels: ['Value','value2']
});
});
</script>
</head>
<body>
<h1>Area charts</h1>
<div id="myfirstchart" style="height: 250px;"></div>
</body>
</html>

看看100个点的显示,我把pointsize值设置为0了,所以图上你看不出点,考虑到点太多所以就不显示了,但是监听鼠标弹出信息的功能还是有的:

  <link rel="stylesheet" href="${ctxStatic}/mystyles/js/mobile/morris.css">
<script type="text/javascript">
$(document).ready(function() {
var data1 = new Array(),data2 = new Array(),data3 = new Array(),data4 = new Array(),data5 = new Array(),data6 = new Array(),data7 = new Array(),upload = new Array();
$("span[id='deviceTem']").each(function(i){
data1[i] = $(this).html();
});
$("span[id='temWater']").each(function(i){
data2[i] = $(this).html();
});
$("span[id='ph']").each(function(i){
data3[i] = $(this).html();
});
$("span[id='do']").each(function(i){
data4[i] = $(this).html();
});
$("span[id='speed']").each(function(i){
data5[i] = $(this).html();
});
$("span[id='pressure']").each(function(i){
data6[i] = $(this).html();
});
$("span[id='air']").each(function(i){
data7[i] = $(this).html();
});
$("span[id='time']").each(function(i){
upload[i] = $(this).html();
});
var a = new Array(upload.reverse(),data1.reverse(),data2.reverse(),data3.reverse(),data4.reverse(),data5.reverse(),data6.reverse(),data7.reverse());
var result=new Array();
var temp = a[0].length;
var temp2 = a.length;
//创建二维数组,相当于a=[a[0],a[1]....]
for (var j=0;j<temp;j++) {//列的变化
result[j]=new Array();
for (var i=0;i<temp2;i++) {//按<列>取值放入数组中
result[j].push(a[i][j]);//变量i为对应行数坐标
}
}
var obj = new Object();
var arr = [];
for (var h=0;h<temp;h++) {
//var define = "{"+result[1].toString()+"}";
obj[h] = eval('(' + "{"+result[h].toString()+"}" + ')');
arr.push(obj[h]);
}
new Morris.Line({
element: 'container',
data: arr,
xkey: 'time',
ykeys: ['value1','value2','value3','value4','value5','value6','value7'],
labels: ['水温','罐温','pH','DO','风速','压力','空气'],
parseTime: false,//注意相关的属性
pointSize: 0
});
//end
});
</script>

Morris.js-利用JavaScript生成时序图的更多相关文章

  1. 利用JFreeChart生成时序图(6) (转自 JSP开发技术大全)

    利用JFreeChart生成时序图(6) (转自 JSP开发技术大全) 14.6 利用JFreeChart生成时序图 通过JFreeChart插件只能生成普通效果的时序图,利用工厂类ChartFact ...

  2. 利用JFreeChart生成区域图 (5) (转自 JSP开发技术大全)

    利用JFreeChart生成区域图 (5) (转自 JSP开发技术大全) 14.5 利用JFreeChart生成区域图 通过JFreeChart插件只能生成普通效果的区域图,利用工厂类ChartFac ...

  3. 利用JFreeChart生成折线图 (4) (转自 JSP开发技术大全)

    利用JFreeChart生成折线图 (4) (转自 JSP开发技术大全) 14.4 利用JFreeChart生成折线图 通过JFreeChart插件,既可以生成普通效果的折线图,也可以生成3D效果的折 ...

  4. Morris.js和flot绘制折线图的比较

    [文章摘要] 最近用开源的AdminLTE做框架感觉效果特别好,其针对图表库Morris.js和flot都提供了不错的支持,也都提供了这两者的例子.不过Morris.js是基于Raphael.js来的 ...

  5. IntelliJ IDEA 如何生成时序图?

    进入扩展程序安装 File > Settings > Plugins > Browse Repositories 搜索 SequenceDiagram,点击右边 Install 安装 ...

  6. 利用JavaScript生成随机数字!

    <!DOCTYPE html> <html> <head> <title>1-99的随机数字</title> <script type ...

  7. 图像分割利用KMeans生成灰度图

    import numpy as np import PIL.Image as image from sklearn.cluster import KMeans def loadData(filePat ...

  8. js利用递归生成随机数填充到数组

    用递归算法实现,数组长度为5且元素的随机数在2-32间不重复的值 var  array = new Array(5); function addNumToArray(array,num){     i ...

  9. JFreeChart 图表生成实例(饼图、柱状图、折线图、时序图)

    import java.awt.BasicStroke; import java.awt.Color; import java.io.FileOutputStream; import java.io. ...

随机推荐

  1. CentOS7下二进制文件安装MySQL5.6

    1.查看已装包 [root@host2 ~]# rpm -qa | grep mysql mysql-libs-5.1.71-1.el6.x86_64 [root@host2 ~]# [root@ho ...

  2. CentOS 7 配置 mariadb

    一.安装mariadb :  yum groupinstall  mariadb  mariadb-client -y 二.启动(设置开机启动)服务 : systemctl  start (enabl ...

  3. C语言入门题

    1. 如下语句通过算术运算和逻辑运算之后 i 和 j 的结果是()         int i=0;         int j=0;         if((++i>0)||(++j>0 ...

  4. #410div2C. Mike and gcd problem

    C. Mike and gcd problem time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  5. C#中的new修饰符说明

    new修饰符主要是用来隐藏从基类继承的成员. 这句话怎么理解呢,就是说有一个类,它有一个继承类,继承类中存在和基类中一样名称的成员(属性,方法等). 对继承类中的该成员使用new修饰符时,调用时将会隐 ...

  6. 1.如何绕过WAF(Web应用防火墙)

    一:大小写转换法: 看字面就知道是什么意思了,就是把大写的小写,小写的大写.比如: SQL:sEleCt vERsIoN(); ‍‍XSS:)</script> 出现原因:在waf里,使用 ...

  7. Head First HTML与CSS(第2版) 中文pdf扫描版

    是不是已经厌倦了那些深奥的HTML书?你可能在抱怨,只有成为专家之后才能读懂那些书.那么,找一本新修订的<Head First HTML与CSS(第2版)>吧,来真正学习HTML.你可能希 ...

  8. C++基础之类和对象一

    (1)类是一种复杂的数据类型,它是抽象数据类型的实现,是数据和相关操作的封装体.类用来确定一类对象的形为,而这些行为是通过类的内部数据和操作来确定的.这些行为是通过一种操作接口来描述的.(2)类的定义 ...

  9. Python中配置文件解析模块-ConfigParser

    Python中有ConfigParser类,可以很方便的从配置文件中读取数据(如DB的配置,路径的配置).配置文件的格式是: []包含的叫section, section 下有option=value ...

  10. 基于 bootstrap 字体图标,用纯CSS实现星级评分功能

    需要用到的图标 实现原理 关键属性是 text-overflow: clip;,表示直接截断文本.我们经常用这个属性的另一个值 text-overflow: ellipsis; 来做省略表示. 先平铺 ...