Morris.js-利用JavaScript生成时序图
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生成时序图的更多相关文章
- 利用JFreeChart生成时序图(6) (转自 JSP开发技术大全)
利用JFreeChart生成时序图(6) (转自 JSP开发技术大全) 14.6 利用JFreeChart生成时序图 通过JFreeChart插件只能生成普通效果的时序图,利用工厂类ChartFact ...
- 利用JFreeChart生成区域图 (5) (转自 JSP开发技术大全)
利用JFreeChart生成区域图 (5) (转自 JSP开发技术大全) 14.5 利用JFreeChart生成区域图 通过JFreeChart插件只能生成普通效果的区域图,利用工厂类ChartFac ...
- 利用JFreeChart生成折线图 (4) (转自 JSP开发技术大全)
利用JFreeChart生成折线图 (4) (转自 JSP开发技术大全) 14.4 利用JFreeChart生成折线图 通过JFreeChart插件,既可以生成普通效果的折线图,也可以生成3D效果的折 ...
- Morris.js和flot绘制折线图的比较
[文章摘要] 最近用开源的AdminLTE做框架感觉效果特别好,其针对图表库Morris.js和flot都提供了不错的支持,也都提供了这两者的例子.不过Morris.js是基于Raphael.js来的 ...
- IntelliJ IDEA 如何生成时序图？
进入扩展程序安装 File > Settings > Plugins > Browse Repositories 搜索 SequenceDiagram,点击右边 Install 安装 ...
- 利用JavaScript生成随机数字！
<!DOCTYPE html> <html> <head> <title>1-99的随机数字</title> <script type ...
- 图像分割利用KMeans生成灰度图
import numpy as np import PIL.Image as image from sklearn.cluster import KMeans def loadData(filePat ...
- js利用递归生成随机数填充到数组
用递归算法实现,数组长度为5且元素的随机数在2-32间不重复的值 var array = new Array(5); function addNumToArray(array,num){ i ...
- JFreeChart 图表生成实例(饼图、柱状图、折线图、时序图)
import java.awt.BasicStroke; import java.awt.Color; import java.io.FileOutputStream; import java.io. ...
随机推荐
- linux日常管理-系统服务
开机不启动不必要系统服务,节省硬件资源,解决安全隐患 调整服务有两种办法 没有这个命令就安装一下.执行这个命令,出现下面界面 按空格键选择或取消,tab切换选择确定或取消 系统服务留下 crond i ...
- C语言学习笔记--enum和sizeof关键字
1.enum关键字 C语言中enum关键字用来定义枚举类型 (1)enum 是 C 语言中的一种自定义类型(2)enum 值是可以根据需要自定义的的整型值(3)第一个定义的 enum 值默认为 0 ( ...
- 删除eclipse Maven 进程 导致eclipse的workspace 启动不了
异常描述: An internal error occurred during: "reload maven project". java.lang.NullPointerExce ...
- LDA与最小二乘法的关系及其变种详解
1 LDA与最小二乘法的关联 对于二值分类问题,令人惊奇的是最小二乘法和LDA分析是一致的.回顾之前的线性回归,给定N个d维特征的训练样例(i从1到N),每个对应一个类标签.我们之前令y=0表示一类, ...
- centos7 安装mysql 5.7多实例
一. Mysql多实例即一台服务器上运行多个Mysql服务进程 ,开启不同的服务端口,通过不同的socket 监听不同的服务端口来提供各自的服务. 二. Mysql多例有以下几个特点: 1. 有效利 ...
- [poj1088]滑雪(二维最长下降子序列)
解题关键:记忆化搜索 #include<cstdio> #include<cstring> #include<algorithm> #include<cstd ...
- error C2872: “flann”: 不明确的符号 --- PCL 与OpenCV2 的flann命名空间冲突问题的解决方法
error C2872: "flann": 不明确的符号 - PCL 与OpenCV2命名空间冲突问题的解决方法 error C2872: "flann" 如果 ...
- python的pip 安装
python的pip 安装 python有很多好用的包,但是需要的时候一一安装实在是麻烦,还好有pip这么好用的安装工具.所以第一步是安装pip,然后其它软件都so easy! 文章来源:https: ...
- c/c++转义字符大全【转自互联网】
将转义字符收集如下:转义字符 意义 ASCII码值(十进制) \a 响铃(BEL) 007 \b 退格(BS) 008 \f 换页(FF) 012 \n 换行(LF) 010 \r 回车(CR) 01 ...
- Struts2学习第三课 Struts2详解
接着上次的课程 这次我们看struts.xml 修改如下:这里是加上命名空间,默认的是不加,我们手动加上时就要在访问时加上命名空间. <?xml version="1.0" ...