轻量高效的拓扑图组件
zh

HTML5实现监控图

2014-05-28

有客户提到网络监控需求,需要展示服务器状态,告警,以及监控信息,比如CPU,内存,宽带状态,使用柱状图展示,Qunee目前并不提供这些图表,需要些扩展代码来实现,尝试了一下,发现还是挺容易的 柱状图信息展示 首先来看CPU柱状图,扩展了一个UI组件,实现了绘制和测量方法,非常简单,绘制代码中取#data属性作为百分比,并根据数值获取红黄绿不同颜色,此外还有文字位置的细节代码 创建BarUI function BarUI(data) { Q.doSuperConstructor(this, BarUI, arguments); } BarUI.prototype = { width: 100, height: 20, measure: …

阅读更多