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>