Morris.js 是一個輕量級的 JS 庫，使用 jQuery 和 Raphaël 來生成各種時序圖。它的優點就是輕巧好用，上手也比較簡單。
Morris.js 的使用方法
Step1. 導入相應的 js 和 css 文件
<script th:src="@{/assets/global/plugins/bootstrap-morris/js/morris.min.js}" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<link href="../assets/global/plugins/bootstrap-morris/css/morris.css" rel="stylesheet" type="text/css" />注意：沒有引用 jquery 的 js 一定要先把 jquery 的 js 引進來。
Step2. 在頁面中添加元素
<div class="box box-info">
<div class="box-header with-border">
<h4 class="box-title">用戶增長曲線</h4>
</div>
<div class="box-body chart-responsive">
<div class="chart" id="line-chart" style="height: 300px;"></div>
</div>
</div>Step3. 寫js代碼，參考實例如下：
// ajax請求從後臺獲取數據
$.ajax({
type : "GET",
url : "/dashboard/chart",
contentType : "application/x-www-form-urlencoded",
dataType : "JSON",
async : false,
success : function(result) {
//使縱座標顯示的沒有小數
var yMaxVal = result[result.length-1].sum;
for(var i=0;;i++){
if(yMaxVal %2 !== 0){
yMaxVal = yMaxVal + 1;
}else{
if((yMaxVal/2)%2 !== 0){
yMaxVal = yMaxVal + 2 ;
}else{
break;
}
}
}
var yMax = "auto"+" "+yMaxVal;
var line = new Morris.Line({
element : 'line-chart',
resize : true,
data : result,
xkey : 'createTime',
ykeys : 'sum',
labels : [ '用戶人數' ],
lineColors : [ '#3c8dbc' ],
hideHover : 'true',
ymax : yMax ,
ymin : "auto 0"
});
},
error : function() {
bootbox.alert("服務器異常");
}
});Morris.js參數說明：
element(必填)：要放置圖標區域的id
data(必填)：圖表的數據(就是從後臺返回的數據)
xkey(必填)：要顯示在x軸的數據的名稱(x軸只能放置時間格式的數據，允許的時間格式有 2018, 2018 Q1, 2018 W1, 2018-07-13, 2018-07-13, 2018-07-13 16:55, 2018-07-13 16:55:00, 2018-07-13 16:55:00.000 等格式)
ykeys(必填)：要是在y軸的數據的名稱
labels(必填):對應ykeys的描述名稱
linewidth(選填)：線的寬度 單位是px 默認值爲3
pointSize(選填)：點(x軸數據和y軸數據的交點)的半徑，單位px 默認值爲4
lineColors(選填)：線和點的顏色陣列 默認值['#0b62a4', '#7A92A3', '#4da74d', '#afd8f8', '#edc240', '#cb4b4b', '#9440ed']
ymax(選填)：y軸的最大值。可以設置爲"auto" 讓 morris.js 自動計算也可以設置爲 "auto 數字"來確保y軸的最大值 默認值爲auto
ymin(選填)：y軸的最小值。可以設置爲"auto" 讓 morris.js 自動計算也可以設置爲 "auto 數字"來確保y軸的最小值 默認值爲"auto 0"
smooth(選填)：設置線是否有弧度 false沒有弧度 true有弧度 默認爲true
hideHover(選填)：設置鼠標滑出時提示框是否隱藏 true則立即隱藏 false則不隱藏 默認爲false
parseTime(選填)：設置根據x軸的數據來產生相應的時間間距 false則時間間距相同 默認爲true
units(選填)：y軸的單位 默認無
dataFormat(選填): 把毫秒轉換成時間字符串 默認爲:function (x) { return new Date(x).toString(); }
marginTop(必填)：圖表區域的上方邊距 默認值爲25
marginRigth(必填):圖表區域的右邊邊距 默認值爲25
marginBottom(必填):圖表區域的下方邊距 默認值爲30
marginLeft(必填)：圖表區域的左邊邊距 默認值爲25
numLines(必填)：圖表y軸要切成幾等份
gridLineColor(選填): 圖表y軸要切成幾等份的線的顏色 默認值爲：#aaa
gridTextColor(選填)：圖表y軸和x軸上的文字顏色 默認值：#888
gridTextSize(選填): 圖表x軸和y軸上的文字的大小 單位是px 默認值爲12
gridStorkeWidth(選填): 圖表y軸要切成幾等份的線的寬度 單位是px 默認值是0.5
hoverPaddingY(選填): 提示信息框的上下文內距 默認值 5
hoverMargin(選填)：提示信息框的邊距 默認值 10
hoverBorderColor(選填)：提示信息框的邊框顏色 默認值爲 #ccc
hoverBorderWidth(選填)：提示信息框的邊框寬度 默認值爲 2
hoverOpacity(選填): 提示信息框的不透明度 默認值爲0.5
hoverLabelColor(選填): 提示信息框文字的顏色 默認值爲 #444
hoverFontSize(選填): 提示信息框的文字大小注：我從後臺返回的數據格式爲[{createTime:'2018-06-12' ,sum:0},{createTime:'2018-06-13' ,sum:0}]
效果圖如下:
