輕量級的繪製圖表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
});

放一張效果圖：