Morris.js参数说明

线图

函数:  Morris.Line(options),其中options是包含以下一些配置选项的对象,其中红色是必填项。

element
 
要插入图表的元素的ID(或引用)。 
注意:此元素必须在其样式中定义宽度和高度。
data
 
要绘制的数据。这是一个对象数组,包含由xkey 和ykeys选项描述的x和y属性。 
注意:此处的排序无关紧要 - 您可以按照最适合您的顺序提供数据。 
注意2:如果需要更新绘图,请setData 在Morris.Line返回的对象上使用该方法。在GitHub回购中有一个setData例子
xkey
 
包含包含日期(X)值的属性名称的字符串。 
时间戳以毫秒时间戳的形式被接受(由Date.getTime()以下格式返回或作为字符串:
  • 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选项。 
注2:日期/时间字符串可以选择包含 T日期和时间部分之间,和/或 Z后缀,以便与ISO-8601日期兼容。
ykeys
 
包含Y值属性名称的字符串列表(每个要绘制的数据系列对应一个值)。
labels
 
包含要绘制的数据系列的标签的字符串列表(对应于ykeys选项中的值 )。
lineColors包含系列线/点的颜色的数组。
lineWidth系列线的宽度(以像素为单位)。
pointSize系列点的直径,以像素为单位。
pointFillColors系列点的颜色。默认情况下使用相同的值lineColors
pointStrokeColors系列点轮廓的颜色。(#ffffff默认)。
ymax最大。绑定Y值。或者,将其设置 为自动计算'auto',或 'auto [num]'自动计算并确保最大y值至少为 [num]
ymin闵。绑定Y值。或者,将其设置 为自动计算'auto',或 'auto [num]'自动计算并确保最小y值最多 [num]。 
提示:您可以使用它来创建具有错误起源的图形。
smooth设置为false禁用线条平滑。
hideHover设置为false始终显示悬停图例。 
设置为true'auto'仅在鼠标光标位于图表上时显示悬停图例。 
设置为'always'永不显示悬停图例。
hoverCallback提供此选项的功能以生成自定义悬停图例。 
该函数将使用悬停图例下的行索引,作为参数传递给构造函数的options对象,包含默认生成的悬停图例内容HTML的字符串,以及包含传入的行的原始数据的对象该data选项。 
例如:
hoverCallback:function(index,options,content,row){
  return“sin(”+ row.x +“)=”+ row.y;
}
parseTime设置为false跳过X值的时间/日期解析,而不是将它们视为等间距系列。
units已过时。请使用postUnits
postUnits设置为字符串值(例如:) '%'以添加所有y标签的标签后缀。
preUnits设置为字符串值(例如:) '$'以添加所有y标签的标签前缀。
dateFormat一种接受毫秒时间戳并将其格式化以显示为图表标签的函数。 
默认:function (x) { return new Date(x).toString(); }
xLabels设置x轴标记间隔。默认情况下,将自动计算间隔。以下是有效的间隔字符串:
  • "decade"
  • "year"
  • "month"
  • "week"
  • "day"
  • "hour"
  • "30min"
  • "15min"
  • "10min"
  • "5min"
  • "minute"
  • "30sec"
  • "15sec"
  • "10sec"
  • "5sec"
  • "second"
xLabelFormat接受Date对象并将其格式化以显示为x轴标签的函数。覆盖自动贴标机或xLabels选项选择的默认格式化程序 。 
例如:function (x) { return x.toString(); }
xLabelAngle从水平到绘制x轴标签的角度(以度为单位)。
yLabelFormat接受y值并将其格式化以显示为y轴标签的函数。 
例如:function (y) { return y.toString() + 'km'; }
goals要在图表上绘制为水平“目标”线的y值列表。 
例如:goals: [1.0, -1.0]
goalStrokeWidth目标线的宽度(以像素为单位)。
goalLineColors用于球门线颜色的颜色值数组。如果列出的颜色少于行中的颜色 goals,则循环显示值。
events要在图表上绘制为垂直“事件”行的x值列表。 
例如:events: ['2012-01-01', '2012-02-01', '2012-03-01']
eventStrokeWidth事件行的宽度(以像素为单位)。
eventLineColors用于事件线颜色的颜色值数组。如果列出的颜色少于行中的颜色 events,则循环显示值。
continuousLine设置为false(默认值)时,将忽略数据系列中的所有 值nullundefined值,并将跨越它们绘制线条。 
设置为时truenull值将中断该行,并且undefined将跨越值。 
注意:在v0.5.0中,此设置将被删除,行为将是在null值处断行 。
axes设置为false禁用绘制x和y轴。
grid设置为false禁用绘制水平网格线。
gridTextColor设置轴标签的颜色(默认值:#888)。
gridTextSize设置轴标签的磅值(默认值:12)。
gridTextFamily设置轴标签的字体系列(默认值:sans-serif)。
gridTextWeight设置轴标签的字体粗细(默认值:正常)。
fillOpacity更改区域填充颜色的不透明度。接受介于0.0(完全透明)和1.0(完全不透明)之间的值。
resize设置为true在包含元素调整大小时启用自动调整大小。(默认值:false)。 
这会对性能产生重大影响,因此默认情况下处于禁用状态。

更多信息请参考:http://morrisjs.github.io/morris.js/

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值