morris的用法(三种图形)

本文详细介绍使用Morris.js绘制柱状图、折线图和饼图的方法,并提供了丰富的参数选项说明,帮助开发者快速上手。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

效果图展示





画面上的jsp实现

[html]  view plain  copy
 print ?
  1. <div id="chart">  
  2.             <!-- BAR CHART -->  
  3.                 <div class="box box-success">  
  4.                     <div class="box-header">  
  5.                         <h3 class="box-title">Bar Chart</h3>  
  6.                     </div>  
  7.                     <div class="box-body chart-responsive">  
  8.                         <div class="chart" id="bar-chart" style="height: 300px;"></div>  
  9.                     </div><!-- /.box-body -->  
  10.                 </div><!-- /.box -->  
  11.                   
  12.                  <!-- LINE CHART -->  
  13.                     <div class="box box-info">  
  14.                         <div class="box-header">  
  15.                             <h3 class="box-title">Line Chart</h3>  
  16.                         </div>  
  17.                         <div class="box-body chart-responsive">  
  18.                             <div class="chart" id="line-chart" style="height: 300px;"></div>  
  19.                         </div><!-- /.box-body -->  
  20.                     </div><!-- /.box -->  
  21.                   <!-- DONUT CHART -->  
  22.                             <div class="box box-danger">  
  23.                                 <div class="box-header">  
  24.                                     <h3 class="box-title">Donut Chart</h3>  
  25.                                 </div>  
  26.                                 <div class="box-body chart-responsive">  
  27.                                     <div class="chart" id="sales-chart" style="height: 300px; position: relative;"></div>  
  28.                                 </div><!-- /.box-body -->  
  29.                             </div><!-- /.box -->  
  30.             </div><!-- --chart -->  
  31.          
  32.        </div>  

jsp中引入相应的js文件

[javascript]  view plain  copy
 print ?
  1. <!-- Morris.js charts -->  
  2.     <script src="static/js/odm/pages/factory/main/raphael-min.js"></script>  
  3.     <script src="static/js/odm/pages/factory/main/morris.js"></script>  
  4.     <script src="static/js/odm/pages/factory/main/morrisData.js"></script>  

morrisData.js的实现


[javascript]  view plain  copy
 print ?
  1. $(function() {  
  2.     "use strict";  
  3.     //BAR CHART  
  4.     var bar = new Morris.Bar({  
  5.         element: 'bar-chart',  
  6.         resize: true,  
  7.         data: [  
  8.             {year: '1111', a: 15, b: 5},  
  9.             {year: '2222', a: 5, b: 25},  
  10.             {year: '3333', a: 35, b: 5},  
  11.             {year: '4444', a: 5, b: 45},  
  12.             {year: '5555', a: 55, b: 5},  
  13.             {year: '6666', a: 5, b: 65},  
  14.             {year: '7777', a: 71, b: 2}  
  15.         ],  
  16.         barColors: ['#00a65a''#f56954'],  
  17.         xkey: 'year',  
  18.         ykeys: ['a''b'],  
  19.         ymax: 'auto 100',  
  20.         units: '',  
  21.         labels: ['CPU''DISK'],  
  22.         hideHover: 'true',  
  23.         hoverFillColor:'#00a65a'  
  24.     });  
  25.       
  26.  // LINE CHART  
  27.     var line = new Morris.Line({  
  28.         element: 'line-chart',  
  29.         resize: true,  
  30.         data: [  
  31.             {year: '2011 Q1', data: 1000},  
  32.             {year: '2011 Q2', data: 8000},  
  33.             {year: '2011 Q3', data: 6000},  
  34.             {year: '2011 Q4', data: 4000},  
  35.             {year: '2012 Q1', data: 5000},  
  36.             {year: '2012 Q2', data: 6000},  
  37.             {year: '2012 Q3', data: 7000},  
  38.             {year: '2012 Q4', data: 6000},  
  39.             {year: '2013 Q1', data: 8000},  
  40.             {year: '2013 Q2', data: 10000},  
  41.             {year: '2013 Q3', data: 8000},  
  42.             {year: '2013 Q4', data: 10000}  
  43.         ],  
  44.         xkey: 'year',  
  45.         ykeys: ['data'],  
  46.         labels: ['数据1'],  
  47.         lineColors: ['#3c8dbc'],  
  48.         hideHover: 'true'  
  49.     });  
  50.       
  51.     //DONUT CHART  
  52.     var donut = new Morris.Donut({  
  53.         element: 'sales-chart',  
  54.         resize: true,  
  55.         colors: ["#3c8dbc""#f56954""#00a65a"],  
  56.         data: [  
  57.             {label: "Download Sales", value: 50},  
  58.             {label: "In-Store Sales", value: 30},  
  59.             {label: "Mail-Order Sales", value: 20}  
  60.         ],  
  61.         hideHover: 'true'  
  62.     });  
  63. });  


參數選項說明:


[javascript]  view plain  copy
 print ?
  1. element<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>必填<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>  
  2. 描述: 要放置圖表的區塊 ID、DOM 或是物件  
  3. 預設值: 無  
  4.    
  5. <span style="font-size:12px; color:#ff800; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">data</span><span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>必填<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>  
  6. 描述: 要繪製成圖表的資料來源,需要一個物件陣列<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>物件的屬性並沒有特別的限制,只要把要顯示的 x 及 y 軸設定在 xkey 及 ykey 中就可以。不過 x 基本上是要是時間格式<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>  
  7. 預設值: 無  
  8.    
  9. xkey<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>必填<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>  
  10. 描述: 對應 <span style="font-size:12px; color:#ff800; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">data</span> 物件陣列中物件的 x 軸<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>時間可以允許有 2012<span style="font-size:12px; color:#339933; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">,</span> 2012 Q1<span style="font-size:12px; color:#339933; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">,</span> 2012 W1<span style="font-size:12px; color:#339933; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">,</span> 2012<span style="font-size:12px; color:#339933; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">-</span>02<span style="font-size:12px; color:#339933; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">,</span> 2012<span style="font-size:12px; color:#339933; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">-</span>02<span style="font-size:12px; color:#339933; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">-</span>24<span style="font-size:12px; color:#339933; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">,</span> 2012<span style="font-size:12px; color:#339933; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">-</span>02<span style="font-size:12px; color:#339933; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">-</span>24 15<span style="font-size:12px; color:#339933; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">:</span>00<span style="font-size:12px; color:#339933; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">,</span> 2012<span style="font-size:12px; color:#339933; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">-</span>02<span style="font-size:12px; color:#339933; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">-</span>24 15<span style="font-size:12px; color:#339933; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">:</span>00<span style="font-size:12px; color:#339933; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">:</span>00<span style="font-size:12px; color:#339933; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">,</span> 2012<span style="font-size:12px; color:#339933; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">-</span>02<span style="font-size:12px; color:#339933; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">-</span>24 15<span style="font-size:12px; color:#339933; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">:</span>00<span style="font-size:12px; color:#339933; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">:</span>00.000 等格式,建議查看 dateFormat 參數<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>  
  11. 預設值: 無  
  12.    
  13. ykeys<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>必填<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>  
  14. 描述: 對應 <span style="font-size:12px; color:#ff800; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">data</span> 物件陣列中物件的 y 軸<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>不管要對應幾個都要用陣列的方式來設定<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>  
  15. 預設值: 無  
  16.    
  17. labels<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>必填<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>  
  18. 描述: 對應 ykeys 的描述名稱  
  19. 預設值: 無  
  20.    
  21. lineWidth<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>選填<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>  
  22. 描述: 線的寬度;單位 px  
  23. 預設值: <span style="font-size:12px; color:#cc00; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">3</span>  
  24.    
  25. pointSize<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>選填<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>  
  26. 描述: 點<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>資料結點<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>的直徑;單位 px  
  27. 預設值: <span style="font-size:12px; color:#cc00; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">4</span>  
  28.    
  29. lineColors<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>選填<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>  
  30. 描述: 線及點的顏色陣列  
  31. 預設值: <span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">[</span><span style="font-size:12px; color:#3366cc; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">'#0b62a4'</span><span style="font-size:12px; color:#339933; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">,</span> <span style="font-size:12px; color:#3366cc; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">'#7A92A3'</span><span style="font-size:12px; color:#339933; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">,</span> <span style="font-size:12px; color:#3366cc; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">'#4da74d'</span><span style="font-size:12px; color:#339933; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">,</span> <span style="font-size:12px; color:#3366cc; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">'#afd8f8'</span><span style="font-size:12px; color:#339933; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">,</span> <span style="font-size:12px; color:#3366cc; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">'#edc240'</span><span style="font-size:12px; color:#339933; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">,</span> <span style="font-size:12px; color:#3366cc; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">'#cb4b4b'</span><span style="font-size:12px; color:#339933; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">,</span> <span style="font-size:12px; color:#3366cc; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">'#9440ed'</span><span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">]</span>  
  32.    
  33. ymax<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>選填<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>  
  34. 描述: y 軸的最大值。可以設定 <span style="font-size:12px; color:#3366cc; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">'auto'</span> 讓 morris.<span style="font-size:12px; color:#66066; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">js</span> 自動計算,或者是設成 <span style="font-size:12px; color:#3366cc; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">'auto 數字'</span> 來確保最大值有到指定的數字  
  35. 預設值: <span style="font-size:12px; color:#3366cc; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">'auto'</span>  
  36.    
  37. ymin<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>選填<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>  
  38. 描述: y 軸的最小值。可以設定 <span style="font-size:12px; color:#3366cc; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">'auto'</span> 讓 morris.<span style="font-size:12px; color:#66066; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">js</span> 自動計算,或者是設成 <span style="font-size:12px; color:#3366cc; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">'auto 數字'</span> 來確保最小值至少有到指定的數字<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>可以利用 ymin 設定來產生空白點<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>  
  39. 預設值:<span style="font-size:12px; color:#3366cc; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">'auto 0'</span>  
  40.    
  41. smooth<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>選填<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>  
  42. 描述: 預設線是有點弧度的效果;若設為 <span style="font-size:12px; color:#03366; line-height:1.5; margin:0px; vertical-align:baseline; font-weight:bold; border:0px; padding:0px">false</span> 則線會用直線的方式表示  
  43. 預設值: <span style="font-size:12px; color:#03366; line-height:1.5; margin:0px; vertical-align:baseline; font-weight:bold; border:0px; padding:0px">true</span>  
  44.    
  45. hideHover<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>選填<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>  
  46. 描述: 預設滑鼠移出圖表時提示框不會隱藏;若設為 <span style="font-size:12px; color:#03366; line-height:1.5; margin:0px; vertical-align:baseline; font-weight:bold; border:0px; padding:0px">true</span> 則當滑鼠移出圖表就立即隱藏  
  47. 預設值: <span style="font-size:12px; color:#03366; line-height:1.5; margin:0px; vertical-align:baseline; font-weight:bold; border:0px; padding:0px">false</span>  
  48.    
  49. parseTime<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>選填<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>  
  50. 描述: 預設會依 <span style="font-size:12px; color:#ff800; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">data</span> 的 x 軸值來產生相對應時間的間距;若設為 <span style="font-size:12px; color:#03366; line-height:1.5; margin:0px; vertical-align:baseline; font-weight:bold; border:0px; padding:0px">false</span> 則把每個時間點都設成一樣的間距  
  51. 預設值: <span style="font-size:12px; color:#03366; line-height:1.5; margin:0px; vertical-align:baseline; font-weight:bold; border:0px; padding:0px">true</span>  
  52.    
  53. units<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>選填<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>  
  54. 描述: y 軸值的單位<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>例如 <span style="font-size:12px; color:#339933; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">%</span><span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>  
  55. 預設值: <span style="font-size:12px; color:#3366cc; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">''</span>  
  56.    
  57. dateFormat<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>選填<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>  
  58. 描述: 把毫秒時間轉成日期字串用  
  59. 預設值: <span style="font-size:12px; color:#03366; line-height:1.5; margin:0px; vertical-align:baseline; font-weight:bold; border:0px; padding:0px">function</span> <span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>x<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span> <span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">{</span> <span style="font-size:12px; color:#0066; line-height:1.5; margin:0px; vertical-align:baseline; font-weight:bold; border:0px; padding:0px">return</span> <span style="font-size:12px; color:#03366; line-height:1.5; margin:0px; vertical-align:baseline; font-weight:bold; border:0px; padding:0px">new</span> <span style="font-size:12px; color:#ff00; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">Date</span><span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>x<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>.<span style="font-size:12px; color:#0066; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">toString</span><span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span><span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span><span style="font-size:12px; color:#339933; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">;</span> <span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">}</span>  


其他公開的參數選項說明:

[javascript]  view plain  copy
 print ?
  1. marginTop<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>必填<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>  
  2. 描述: 圖表區塊的上方邊距  
  3. 預設值: <span style="font-size:12px; color:#cc00; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">25</span>  
  4.    
  5. marginRight<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>必填<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>  
  6. 描述: 圖表區塊的右邊邊距  
  7. 預設值: <span style="font-size:12px; color:#cc00; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">25</span>  
  8.    
  9. marginBottom<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>必填<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>  
  10. 描述: 圖表區塊的下方邊距  
  11. 預設值: <span style="font-size:12px; color:#cc00; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">30</span>  
  12.    
  13. marginLeft<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>必填<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>  
  14. 描述: 圖表區塊的左邊邊距  
  15. 預設值: <span style="font-size:12px; color:#cc00; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">25</span>  
  16.    
  17. numLines<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>必填<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>  
  18. 描述: 圖表 y 軸要切成幾等份  
  19. 預設值: <span style="font-size:12px; color:#cc00; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">5</span>  
  20.    
  21. gridLineColor<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>選填<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>  
  22. 描述: 圖表 y 軸要切成幾等份的線的顏色  
  23. 預設值: <span style="font-size:12px; color:#3366cc; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">'#aaa'</span>  
  24.    
  25. gridTextColor<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>選填<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>  
  26. 描述: 圖表 x 及 y 軸的上的文字顏色  
  27. 預設值: <span style="font-size:12px; color:#3366cc; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">'#888'</span>  
  28.    
  29. gridTextSize<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>選填<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>  
  30. 描述: 圖表 x 及 y 軸的上的文字大小;單位 px  
  31. 預設值: <span style="font-size:12px; color:#cc00; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">12</span>  
  32.    
  33. gridStrokeWidth<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>選填<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>  
  34. 描述: 圖表 y 軸要切成幾等份的線的寬度;單位 px  
  35. 預設值: <span style="font-size:12px; color:#cc00; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">0.5</span>  
  36.    
  37. hoverPaddingX<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>選填<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>  
  38. 描述: 提示訊息框的左右內文距  
  39. 預設值:<span style="font-size:12px; color:#cc00; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">10</span>  
  40.    
  41. hoverPaddingY<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>選填<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>  
  42. 描述: 提示訊息框的上下內文距  
  43. 預設值: <span style="font-size:12px; color:#cc00; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">5</span>  
  44.    
  45. hoverMargin<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>選填<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>  
  46. 描述: 提示訊息框的邊距  
  47. 預設值: <span style="font-size:12px; color:#cc00; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">10</span>  
  48.    
  49. hoverFillColor<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>選填<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>  
  50. 描述: 提示訊息框的背景顏色  
  51. 預設值: <span style="font-size:12px; color:#3366cc; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">'#fff'</span>  
  52.    
  53. hoverBorderColor<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>選填<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>  
  54. 描述: 提示訊息框的邊框顏色  
  55. 預設值: <span style="font-size:12px; color:#3366cc; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">'#ccc'</span>  
  56.    
  57. hoverBorderWidth<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>選填<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>  
  58. 描述: 提示訊息框的邊框寬度  
  59. 預設值: <span style="font-size:12px; color:#cc00; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">2</span>  
  60.    
  61. hoverOpacity<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>選填<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>  
  62. 描述: 提示訊息框的不透明度  
  63. 預設值: <span style="font-size:12px; color:#cc00; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">0.95</span>  
  64.    
  65. hoverLabelColor<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>選填<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>  
  66. 描述: 提示訊息框的文字顏色  
  67. 預設值: <span style="font-size:12px; color:#3366cc; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">'#444'</span>  
  68.    
  69. hoverFontSize<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span>選填<span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span>  
  70. 描述: 提示訊息框的文字大小  
  71. 預設值: <span style="font-size:12px; color:#cc00; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">12</span>  


方法說明:


[javascript]  view plain  copy
 print ?
  1. <span style="font-size:12px; color:#0800; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">// 產生圖表</span>  
  2. Morris.<span style="font-size:12px; color:#66066; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">Line</span><span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">(</span><span style="font-size:12px; color:#ff00; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">options</span><span style="font-size:12px; color:#0990; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">)</span><span style="font-size:12px; color:#339933; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">;</span>  


[javascript]  view plain  copy
 print ?
  1. <script type="text/javascript" src="jquery.js"></script>  
  2. <script type="text/javascript" src="raphael.js"></script>  
  3. <script type="text/javascript" src="morris.js"></script>  
  4. <script type="text/javascript">  
  5.     $(function(){  
  6.         // 圖表的資料  
  7.         var data = [  
  8.           {"period""2011 Q3""licensed": 3407, "sorned": 660},  
  9.           {"period""2011 Q2""licensed": 3351, "sorned": 629},  
  10.           {"period""2011 Q1""licensed": 3269, "sorned": 618},  
  11.           {"period""2010 Q4""licensed": 3246, "sorned": 661},  
  12.           {"period""2010 Q3""licensed": 3257, "sorned": 667},  
  13.           {"period""2010 Q2""licensed": 3248, "sorned": 627},  
  14.           {"period""2010 Q1""licensed": 3171, "sorned": 660},  
  15.           {"period""2009 Q4""licensed": 3171, "sorned": 676},  
  16.           {"period""2009 Q3""licensed": 3201, "sorned": 656},  
  17.           {"period""2009 Q2""licensed": 3215, "sorned": 622},  
  18.           {"period""2009 Q1""licensed": 3148, "sorned": 632},  
  19.           {"period""2008 Q4""licensed": 3155, "sorned": 681},  
  20.           {"period""2008 Q3""licensed": 3190, "sorned": 667},  
  21.           {"period""2007 Q4""licensed": 3226, "sorned": 620},  
  22.           {"period""2006 Q4""licensed": 3245, "sorned"null},  
  23.           {"period""2005 Q4""licensed": 3289, "sorned"null},  
  24.           {"period""2004 Q4""licensed": 3263, "sorned"null},  
  25.           {"period""2003 Q4""licensed": 3189, "sorned"null},  
  26.           {"period""2002 Q4""licensed": 3079, "sorned"null},  
  27.           {"period""2001 Q4""licensed": 3085, "sorned"null},  
  28.           {"period""2000 Q4""licensed": 3055, "sorned"null},  
  29.           {"period""1999 Q4""licensed": 3063, "sorned"null},  
  30.           {"period""1998 Q4""licensed": 2943, "sorned"null},  
  31.           {"period""1997 Q4""licensed": 2806, "sorned"null},  
  32.           {"period""1996 Q4""licensed": 2674, "sorned"null},  
  33.           {"period""1995 Q4""licensed": 1702, "sorned"null},  
  34.           {"period""1994 Q4""licensed": 1732, "sorned"null}  
  35.         ];  
  36.    
  37.         // 產生圖表, 資料來源為 data  
  38.         // x 軸為 period, y 軸為 ['licensed', 'sorned']  
  39.         Morris.Line({  
  40.           element: 'graph',  
  41.           data: data,   
  42.           xkey: 'period',  
  43.           ymax: 'auto 5000',  
  44.           ykeys: ['licensed''sorned'],  
  45.           labels: ['Licensed''SORN']  
  46.         });  
  47.     });  
  48. </script>  
  49.    
  50. <body>  
  51.     <div id="graph"></div>  
  52. </body>  

参考:http://www.cnblogs.com/mayswind/p/3806883.html
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值