效果图展示
画面上的jsp实现
- <div id="chart">
- <!-- BAR CHART -->
- <div class="box box-success">
- <div class="box-header">
- <h3 class="box-title">Bar Chart</h3>
- </div>
- <div class="box-body chart-responsive">
- <div class="chart" id="bar-chart" style="height: 300px;"></div>
- </div><!-- /.box-body -->
- </div><!-- /.box -->
- <!-- LINE CHART -->
- <div class="box box-info">
- <div class="box-header">
- <h3 class="box-title">Line Chart</h3>
- </div>
- <div class="box-body chart-responsive">
- <div class="chart" id="line-chart" style="height: 300px;"></div>
- </div><!-- /.box-body -->
- </div><!-- /.box -->
- <!-- DONUT CHART -->
- <div class="box box-danger">
- <div class="box-header">
- <h3 class="box-title">Donut Chart</h3>
- </div>
- <div class="box-body chart-responsive">
- <div class="chart" id="sales-chart" style="height: 300px; position: relative;"></div>
- </div><!-- /.box-body -->
- </div><!-- /.box -->
- </div><!-- --chart -->
- </div>
jsp中引入相应的js文件
- <!-- Morris.js charts -->
- <script src="static/js/odm/pages/factory/main/raphael-min.js"></script>
- <script src="static/js/odm/pages/factory/main/morris.js"></script>
- <script src="static/js/odm/pages/factory/main/morrisData.js"></script>
morrisData.js的实现
- $(function() {
- "use strict";
- //BAR CHART
- var bar = new Morris.Bar({
- element: 'bar-chart',
- resize: true,
- data: [
- {year: '1111', a: 15, b: 5},
- {year: '2222', a: 5, b: 25},
- {year: '3333', a: 35, b: 5},
- {year: '4444', a: 5, b: 45},
- {year: '5555', a: 55, b: 5},
- {year: '6666', a: 5, b: 65},
- {year: '7777', a: 71, b: 2}
- ],
- barColors: ['#00a65a', '#f56954'],
- xkey: 'year',
- ykeys: ['a', 'b'],
- ymax: 'auto 100',
- units: '',
- labels: ['CPU', 'DISK'],
- hideHover: 'true',
- hoverFillColor:'#00a65a'
- });
- // LINE CHART
- var line = new Morris.Line({
- element: 'line-chart',
- resize: true,
- data: [
- {year: '2011 Q1', data: 1000},
- {year: '2011 Q2', data: 8000},
- {year: '2011 Q3', data: 6000},
- {year: '2011 Q4', data: 4000},
- {year: '2012 Q1', data: 5000},
- {year: '2012 Q2', data: 6000},
- {year: '2012 Q3', data: 7000},
- {year: '2012 Q4', data: 6000},
- {year: '2013 Q1', data: 8000},
- {year: '2013 Q2', data: 10000},
- {year: '2013 Q3', data: 8000},
- {year: '2013 Q4', data: 10000}
- ],
- xkey: 'year',
- ykeys: ['data'],
- labels: ['数据1'],
- lineColors: ['#3c8dbc'],
- hideHover: 'true'
- });
- //DONUT CHART
- var donut = new Morris.Donut({
- element: 'sales-chart',
- resize: true,
- colors: ["#3c8dbc", "#f56954", "#00a65a"],
- data: [
- {label: "Download Sales", value: 50},
- {label: "In-Store Sales", value: 30},
- {label: "Mail-Order Sales", value: 20}
- ],
- hideHover: 'true'
- });
- });
參數選項說明:
- 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>
- 描述: 要放置圖表的區塊 ID、DOM 或是物件
- 預設值: 無
- <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>
- 描述: 要繪製成圖表的資料來源,需要一個物件陣列<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>
- 預設值: 無
- 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>
- 描述: 對應 <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>
- 預設值: 無
- 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>
- 描述: 對應 <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>
- 預設值: 無
- 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>
- 描述: 對應 ykeys 的描述名稱
- 預設值: 無
- 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>
- 描述: 線的寬度;單位 px
- 預設值: <span style="font-size:12px; color:#cc00; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">3</span>
- 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>
- 描述: 點<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
- 預設值: <span style="font-size:12px; color:#cc00; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">4</span>
- 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>
- 描述: 線及點的顏色陣列
- 預設值: <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>
- 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>
- 描述: 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:#3366cc; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">'auto'</span>
- 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>
- 描述: 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>
- 預設值:<span style="font-size:12px; color:#3366cc; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">'auto 0'</span>
- 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>
- 描述: 預設線是有點弧度的效果;若設為 <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> 則線會用直線的方式表示
- 預設值: <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>
- 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>
- 描述: 預設滑鼠移出圖表時提示框不會隱藏;若設為 <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> 則當滑鼠移出圖表就立即隱藏
- 預設值: <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>
- 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>
- 描述: 預設會依 <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> 則把每個時間點都設成一樣的間距
- 預設值: <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>
- 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>
- 描述: 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>
- 預設值: <span style="font-size:12px; color:#3366cc; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">''</span>
- 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>
- 描述: 把毫秒時間轉成日期字串用
- 預設值: <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>
其他公開的參數選項說明:
- 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>
- 描述: 圖表區塊的上方邊距
- 預設值: <span style="font-size:12px; color:#cc00; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">25</span>
- 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>
- 描述: 圖表區塊的右邊邊距
- 預設值: <span style="font-size:12px; color:#cc00; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">25</span>
- 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>
- 描述: 圖表區塊的下方邊距
- 預設值: <span style="font-size:12px; color:#cc00; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">30</span>
- 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>
- 描述: 圖表區塊的左邊邊距
- 預設值: <span style="font-size:12px; color:#cc00; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">25</span>
- 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>
- 描述: 圖表 y 軸要切成幾等份
- 預設值: <span style="font-size:12px; color:#cc00; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">5</span>
- 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>
- 描述: 圖表 y 軸要切成幾等份的線的顏色
- 預設值: <span style="font-size:12px; color:#3366cc; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">'#aaa'</span>
- 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>
- 描述: 圖表 x 及 y 軸的上的文字顏色
- 預設值: <span style="font-size:12px; color:#3366cc; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">'#888'</span>
- 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>
- 描述: 圖表 x 及 y 軸的上的文字大小;單位 px
- 預設值: <span style="font-size:12px; color:#cc00; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">12</span>
- 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>
- 描述: 圖表 y 軸要切成幾等份的線的寬度;單位 px
- 預設值: <span style="font-size:12px; color:#cc00; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">0.5</span>
- 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>
- 描述: 提示訊息框的左右內文距
- 預設值:<span style="font-size:12px; color:#cc00; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">10</span>
- 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>
- 描述: 提示訊息框的上下內文距
- 預設值: <span style="font-size:12px; color:#cc00; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">5</span>
- 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>
- 描述: 提示訊息框的邊距
- 預設值: <span style="font-size:12px; color:#cc00; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">10</span>
- 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>
- 描述: 提示訊息框的背景顏色
- 預設值: <span style="font-size:12px; color:#3366cc; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">'#fff'</span>
- 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>
- 描述: 提示訊息框的邊框顏色
- 預設值: <span style="font-size:12px; color:#3366cc; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">'#ccc'</span>
- 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>
- 描述: 提示訊息框的邊框寬度
- 預設值: <span style="font-size:12px; color:#cc00; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">2</span>
- 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>
- 描述: 提示訊息框的不透明度
- 預設值: <span style="font-size:12px; color:#cc00; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">0.95</span>
- 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>
- 描述: 提示訊息框的文字顏色
- 預設值: <span style="font-size:12px; color:#3366cc; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">'#444'</span>
- 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>
- 描述: 提示訊息框的文字大小
- 預設值: <span style="font-size:12px; color:#cc00; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">12</span>
方法說明:
- <span style="font-size:12px; color:#0800; line-height:1.5; margin:0px; vertical-align:baseline; border:0px; padding:0px">// 產生圖表</span>
- 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>
- <script type="text/javascript" src="jquery.js"></script>
- <script type="text/javascript" src="raphael.js"></script>
- <script type="text/javascript" src="morris.js"></script>
- <script type="text/javascript">
- $(function(){
- // 圖表的資料
- var data = [
- {"period": "2011 Q3", "licensed": 3407, "sorned": 660},
- {"period": "2011 Q2", "licensed": 3351, "sorned": 629},
- {"period": "2011 Q1", "licensed": 3269, "sorned": 618},
- {"period": "2010 Q4", "licensed": 3246, "sorned": 661},
- {"period": "2010 Q3", "licensed": 3257, "sorned": 667},
- {"period": "2010 Q2", "licensed": 3248, "sorned": 627},
- {"period": "2010 Q1", "licensed": 3171, "sorned": 660},
- {"period": "2009 Q4", "licensed": 3171, "sorned": 676},
- {"period": "2009 Q3", "licensed": 3201, "sorned": 656},
- {"period": "2009 Q2", "licensed": 3215, "sorned": 622},
- {"period": "2009 Q1", "licensed": 3148, "sorned": 632},
- {"period": "2008 Q4", "licensed": 3155, "sorned": 681},
- {"period": "2008 Q3", "licensed": 3190, "sorned": 667},
- {"period": "2007 Q4", "licensed": 3226, "sorned": 620},
- {"period": "2006 Q4", "licensed": 3245, "sorned": null},
- {"period": "2005 Q4", "licensed": 3289, "sorned": null},
- {"period": "2004 Q4", "licensed": 3263, "sorned": null},
- {"period": "2003 Q4", "licensed": 3189, "sorned": null},
- {"period": "2002 Q4", "licensed": 3079, "sorned": null},
- {"period": "2001 Q4", "licensed": 3085, "sorned": null},
- {"period": "2000 Q4", "licensed": 3055, "sorned": null},
- {"period": "1999 Q4", "licensed": 3063, "sorned": null},
- {"period": "1998 Q4", "licensed": 2943, "sorned": null},
- {"period": "1997 Q4", "licensed": 2806, "sorned": null},
- {"period": "1996 Q4", "licensed": 2674, "sorned": null},
- {"period": "1995 Q4", "licensed": 1702, "sorned": null},
- {"period": "1994 Q4", "licensed": 1732, "sorned": null}
- ];
- // 產生圖表, 資料來源為 data
- // x 軸為 period, y 軸為 ['licensed', 'sorned']
- Morris.Line({
- element: 'graph',
- data: data,
- xkey: 'period',
- ymax: 'auto 5000',
- ykeys: ['licensed', 'sorned'],
- labels: ['Licensed', 'SORN']
- });
- });
- </script>
- <body>
- <div id="graph"></div>
- </body>
参考:http://www.cnblogs.com/mayswind/p/3806883.html