morris的用法
参数选项说明:
element(必填)
描述: 要放置图表的区块 ID、DOM 或是物件
预设值: 无
data(必填)
描述: 要绘製成图表的资料来源,需要一个物件阵列(物件的属性并没有特别的限制,只要把要显示的 x 及 y 轴设定在 xkey 及 ykey 中就可以。不过 x 基本上是要是时间格式)
预设值: 无
xkey(必填)
描述: 对应 data 物件阵列中物件的 x 轴(时间可以允许有 2012, 2012 Q1, 2012 W1, 2012-02, 2012-02-24, 2012-02-24 15:00, 2012-02-24 15:00:00, 2012-02-24 15:00:00.000 等格式,建议查看 dateFormat 参数)
预设值: 无
ykeys(必填)
描述: 对应 data 物件阵列中物件的 y 轴(不管要对应几个都要用阵列的方式来设定)
预设值: 无
labels(必填)
描述: 对应 ykeys 的描述名称
预设值: 无
lineWidth(选填)
描述: 线的宽度;单位 px
预设值: 3
pointSize(选填)
描述: 点(资料结点)的直径;单位 px
预设值: 4
lineColors(选填)
描述: 线及点的颜色阵列
预设值: ['#0b62a4', '#7A92A3', '#4da74d', '#afd8f8', '#edc240', '#cb4b4b', '#9440ed']
ymax(选填)
描述: y 轴的最大值。可以设定 'auto' 让 morris.js 自动计算,或者是设成 'auto 数字' 来确保最大值有到指定的数字
预设值: 'auto'
ymin(选填)
描述: y 轴的最小值。可以设定 'auto' 让 morris.js 自动计算,或者是设成 'auto 数字' 来确保最小值至少有到指定的数字(可以利用 ymin 设定来产生空白点)
预设值:'auto 0'
smooth(选填)
描述: 预设线是有点弧度的效果;若设为 false 则线会用直线的方式表示
预设值: true
hideHover(选填)
描述: 预设滑鼠移出图表时提示框不会隐藏;若设为 true 则当滑鼠移出图表就立即隐藏
预设值: false
parseTime(选填)
描述: 预设会依 data 的 x 轴值来产生相对应时间的间距;若设为 false 则把每个时间点都设成一样的间距
预设值: true
units(选填)
描述: y 轴值的单位(例如 %)
预设值: ''
dateFormat(选填)
描述: 把毫秒时间转成日期字串用
预设值: function (x) { return new Date(x).toString(); }
未公开的参数选项说明:
marginTop(必填)
描述: 图表区块的上方边距
预设值: 25
marginRight(必填)
描述: 图表区块的右边边距
预设值: 25
marginBottom(必填)
描述: 图表区块的下方边距
预设值: 30
marginLeft(必填)
描述: 图表区块的左边边距
预设值: 25
numLines(必填)
描述: 图表 y 轴要切成几等份
预设值: 5
gridLineColor(选填)
描述: 图表 y 轴要切成几等份的线的颜色
预设值: '#aaa'
gridTextColor(选填)
描述: 图表 x 及 y 轴的上的文字颜色
预设值: '#888'
gridTextSize(选填)
描述: 图表 x 及 y 轴的上的文字大小;单位 px
预设值: 12
gridStrokeWidth(选填)
描述: 图表 y 轴要切成几等份的线的宽度;单位 px
预设值: 0.5
hoverPaddingX(选填)
描述: 提示讯息框的左右内文距
预设值:10
hoverPaddingY(选填)
描述: 提示讯息框的上下内文距
预设值: 5
hoverMargin(选填)
描述: 提示讯息框的边距
预设值: 10
hoverFillColor(选填)
描述: 提示讯息框的背景颜色
预设值: '#fff'
hoverBorderColor(选填)
描述: 提示讯息框的边框颜色
预设值: '#ccc'
hoverBorderWidth(选填)
描述: 提示讯息框的边框宽度
预设值: 2
hoverOpacity(选填)
描述: 提示讯息框的不透明度
预设值: 0.95
hoverLabelColor(选填)
描述: 提示讯息框的文字颜色
预设值: '#444'
hoverFontSize(选填)
描述: 提示讯息框的文字大小
预设值: 12