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}]
效果图如下:
