Morris.js 是一个轻量级的 JS 库，使用 jQuery 和 Raphaël 来生成各种时序图。

虽说现在移动手机网络已经到了4G，但是在移动web客户端开发过中，为了达到良好的体验效果，需要考虑很多的因素，比如板式，网速等等，最近有个任务需要在移动端显示<span>标签的内容，所有找js类的开源库，最终选择Morris.js ，一个是小，另外是支持移动包括iso和android，项目地址：，相比其他的开源库，这个上手还是比较简单的，可以看看官方的，但是有一些需要注意的地方：貌似x轴只能是已时间/日期为单位的(哈哈，还好我不要求)

第一步，导入相应的js文件：

由于我的是在jsp页面调用的，一开始用相对路径死活都不出效果，后来查了一些资料才知道jsp页面下不能访问对应的路径，所以只能子啊web-inf/static文件夹下引用了，这个应该是可以的，因为该目录下都是一些网站用到的js。

第二步，在body标签内添加一个你需要放图的<div>标签，并添加相对应的id

第三步，就是写javascript代码了，参考实例：

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});

放一张效果图：