使用morris.js製作折線圖 方法

使用morris.js製作折線圖 方法

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}] 

效果圖如下: