morris的用法（三种图形）

最新推荐文章于 2025-06-13 11:00:44 发布
转载 最新推荐文章于 2025-06-13 11:00:44 发布 · 1w 阅读 · 1

本文详细介绍使用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
JS中简单图形绘制之morris
technology_track的博客
07-29 1078
Morris.js库可以用来绘制简单的图形，一共有饼图、折线图、柱状图。 Morris.js的使用需要调用相应的js和css文件 <script src="js/raphael-min.js"></script> <script src="js/morris.js"></script> <link rel="stylesheet" href="...
Morris.js的参数说明和使用方法介绍
qq_24820309的博客
08-27 7268
Morris.Line({ element: "hero-graph", data: [ { period: "2011 Q3", licensed: 3407, sorned: 660 }, { period: "2011 Q2", license
Morris图表如何重新加载数据（重绘）
天天向上
05-05 2286
Morris加载数据 <div id="morris-donut-example" style="height: 245px;" class="morris-chart morris-donut-example" data-replace="data-value"></div> <!-- jQuery --> <script src="assets/j...
二叉树奇技：Morris中序遍历
最新发布
m0_74787564的博客
06-13 1113
Morris遍历在中序遍历的过程中添加了指向，类似于手算二叉树的过程，是一种空间换时间的巧妙方法。
morris的用法
weixin_30846599的博客
05-27 389
參數選項說明： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 4...
前端项目-angular-morris.zip
09-03
Angular-Morris 是一个专门为 AngularJS（一种由Google维护的前端JavaScript框架）设计的库，它使得在Angular应用中集成Morris.js图表变得更加简单和直观。Morris.js是一款优秀的图表库，用于创建各种类型的数据可视...
Morris.Js 漂亮的时序线型图
08-09
下面我们将详细探讨这些图表类型及其使用方法。 1. **线性图（Line Chart）** 线性图是最基础的图表类型，用于展示数据随时间变化的趋势。创建线性图只需要提供一系列时间点和对应的数据值，Morris.js 将自动处理...
Morris方法在Matlab函数中的灵敏度分析应用指南
知识点三：Morris 方法在Matlab中的应用 Morris方法可以在Matlab环境中实现，通过编写特定的函数或脚本来进行灵敏度分析。Matlab是一种广泛使用的数学计算和可视化软件，非常适合进行此类分析。利用Matlab强大的函数...
请为我写出不使用Morris包用matlab实现Morris敏感性分析
10-15
Morris 敏感性分析是一种统计方法，用于评估模型输入参数对输出结果的影响程度。虽然 MATLAB 官方库并未直接提供 Morris 分析工具箱 (Morris Toolbox)，但是我们可以手动编写一些基本步骤来实现这个功能。以下是一个...
柱状图jquery特效代码 js+css实现的柱形图
01-14
柱状图jquery特效代码 js+css实现的柱形图，js+css写的一个页面柱状图组件，“柱子”是用div显示的，附带有使用示例，感兴趣的朋友可以看一下，欢迎给出指导意见
Morris 轻量级 图表
weixin_30905981的博客
06-29 450
Morris.js 是基于 jQuery 和 Raphaël 的轻量级矢量图形库，帮助开发人员轻松绘制各种形式的图表。示例： HTML: <div id="myfirstchart" style="height: 250px;"></div> JavaScript： new Morris.Line({ // ID of the element in...
morris.js绘制图表
BeanModel的博客
05-22 5893
demo的百度云链接: https://pan.baidu.com/s/1abCRoMXboq0EDe5697K6LQ 密码: k25i效果图:当然还有很多,不展示了.用法说明:导入核心的几个包:1.jquery.js2.morris.js3.raphael-2.1.0.min.js注意:这里要强调的是:html标签中定义div,将id与js中绘制的图表的element属性的值保持一致即可,并且定...
Morris.js参数说明
openg007的专栏
05-29 3332
线图 函数：Morris.Line(options)，其中options是包含以下一些配置选项的对象，其中红色是必填项。 element 要插入图表的元素的ID（或引用）。注意：此元素必须在其样式中定义宽度和高度。 data 要绘制的数据。这是一个对象数组，包含由xkey和ykeys选项描述的x和y属性。注意：此处的排序无关紧要 - 您可以按照最适...
Morris图表使用小记
weixin_34128501的博客
01-01 638
挺好用的，碰到几个问题，有的是瞎试解决了的： 1、我想折线图能够响应单击事件，即点击某个节点后，就能加载进一步的信息，帮助没找到，参照另外一个地方的写法，居然支持事件 Morris.Line({ element: 'graph', data: year_data, xkey: 'p...
轻量级的绘制图表js库--Morris.js
weixin_30802273的博客
12-07 328
Morris.js 是一个轻量级的 JS 库，使用 jQuery 和 Raphaël 来生成各种时序图。 虽说现在移动手机网络已经到了4G，但是在移动web客户端开发过中，为了达到良好的体验效果，需要考虑很多的因素，比如板式，网速等等，最近有个任务需要在移动端显示<span>标签的内容，所有找js类的开源库，最终选择Morris.js ，一个是小，另外是支持移动包括iso和a...
jquery图表插件morris.js参数详解和highcharts图表插件
weixin_33801856的博客
07-19 580
一、morris.js 优点：轻巧、简单好用 缺点：没highcharts功能多，常用的足以 网址：http://morrisjs.github.io/morris.js/ 核心代码 1、head调用js &lt;link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris....
前台图形组件精选：Flot与Jsgraph等
根据提供的文件信息，标题、描述和标签均指向了一个主题：各种前台图形组件。本文将详细探讨该主题下可能涉及的前端图形组件种类、功能、应用...掌握这些图形组件的使用方法和应用场景对于前端开发人员而言至关重要。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值