HTML5繪製網路監控圖

edithfang發表於2014-06-14
HTML

柱狀圖資訊展示

首先來看CPU柱狀圖，擴充套件了一個UI元件，實現了繪製和測量方法，非常簡單，繪製程式碼中取#data屬性作為百分比，並根據數值獲取紅黃綠不同顏色，此外還有文字位置的細節程式碼

建立BarUI 

function BarUI(data) {
    Q.doSuperConstructor(this, BarUI, arguments);
}

BarUI.prototype = {
    width: 100,
    height: 20,
    measure: function () {
        this.setMeasuredBounds(this.width, this.height);
    },
    draw: function (g, scale, selected) {
        var value = this.data * 100 | 0;
        var data = this.data;
        if (data > 1) {
            data = 1;
        } else if (data < 0) { data = 0; } var color; if (value < 40) { color = "#0F0"; } else if (value < 70) { color = "#FF0"; } else { color = "#F00"; } g.fillStyle = color; var w = data * this.width; g.fillRect(0, 0, w, this.height); g.beginPath(); g.strokeStyle = "#555"; g.strokeRect(0, 0, this.width, this.height); g.fillStyle = "#555"; g.textBaseline = "middle"; if (value > 83) {
            g.textAlign = "right";
            g.fillText(value, this.width - 1, this.height / 2);
            return;
        }
        g.fillText(value, w + 3, this.height / 2);
    }
}

Q.extend(BarUI, Q.BaseUI);

新增到節點

加到一個文位元組點上，並與value屬性繫結，這樣就可以通過node.set("value", 0.5)對柱狀圖設定值了 

function createNodeWithBar(label, x, y){
    var node = graph.createText(label, x, y);
    node.setStyle(Q.Styles.BORDER, 1);
    node.setStyle(Q.Styles.LABEL_PADDING, 5);
    node.setStyle(Q.Styles.PADDING, 10);
    node.setStyle(Q.Styles.BACKGROUND_COLOR, "#FFF");
    var bar = new BarUI();
    bar.position = Q.Position.RIGHT_MIDDLE;
    bar.anchorPosition = Q.Position.LEFT_MIDDLE;
    node.addUI(bar, {
        property : "value",
        propertyType : Q.Consts.PROPERTY_TYPE_CLIENT,
        bindingProperty : "data"
    });
    node.set("value", Math.random());
    return node;
}

新增定時器

建立兩個節點，實際使用一下，並建立個定時器，動態更改柱狀圖的數值 

var node = createNodeWithBar("CPU佔用", 150, 0);
var node2 = createNodeWithBar("記憶體佔用", 150, 50);
var timer = setTimeout(function A() {
    node.set("value", Math.random());
    node2.set("value", Math.random());
    timer = setTimeout(A, 2000);
}, 2000);

呈現效果

繪製資料庫圖示

向量圖形是Qunee的一個特點，通常先由美工設計圖示，輸出SVG，然後將SVG轉換成canvas繪製函式，考慮到使用者的圖形並不複雜，是一圓柱形，代表oracle資料庫，所以直接用2d寫了個繪製函式，用貝塞爾曲線繪製了一個圓柱體，參考了橢圓的繪製 

var OracleDraw = {
    draw: function(g){
        g.translate(2, 2);
        var x = 0, y = 0, w = 50, h = 20;
        var kappa = 0.5522848;
        ox = (w / 2) * kappa, // control point offset horizontal
            oy = (h / 2) * kappa, // control point offset vertical
            xe = x + w,           // x-end
            ye = y + h,           // y-end
            xm = x + w / 2,       // x-middle
            ym = y + h / 2;       // y-middle

        g.beginPath();
        g.moveTo(x, ym);
        g.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
        g.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
        g.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
        g.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
        g.moveTo(0, 10);
        g.bezierCurveTo(x, ym + oy, xm - ox, ye, xm, ye);
        g.bezierCurveTo(xm + ox, ye, xe, ym + oy, 50, 10);
        g.lineTo(50, 50);
        ye += 40;
        ym += 40;
        g.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
        g.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
        g.lineTo(0, 10);
        g.lineTo(0, 50);
        g.fillStyle = "rgba(255,255,255,0.5)";//"#FFF";
        g.fill();
        g.lineWidth = 1;
        g.strokeStyle = "#555";
        g.stroke();
    }
}

建立一個節點，設定節點圖片為上面定義的圓柱體 

var oracle = graph.createNode("Oracle", 200, 150);
oracle.setStyle(Q.Styles.LABEL_ANCHOR_POSITION, Q.Position.CENTER_MIDDLE);
oracle.setStyle(Q.Styles.LABEL_POSITION, Q.Position.CENTER_MIDDLE);
oracle.image = OracleDraw;
效果如下


告警與染色

Qunee本沒有告警這東西，好在UI組合靈活，柱狀圖都加上去了，再加個告警冒泡自然不是難事，於是又寫了一些程式碼，並設定了圖示渲染色 

var oracle = graph.createNode("Oracle", 200, 150);
oracle.setStyle(Q.Styles.LABEL_ANCHOR_POSITION, Q.Position.CENTER_MIDDLE);
oracle.setStyle(Q.Styles.LABEL_POSITION, Q.Position.CENTER_MIDDLE);
oracle.image = OracleDraw;
oracle.setStyle(Q.Styles.RENDER_COLOR, "#F00");
var alarmLabel = new Q.LabelUI("ALARM");
alarmLabel.showPointer = true;
alarmLabel.offsetY = -10;
alarmLabel.offsetX = 10;
alarmLabel.pointerWidth = 6;
alarmLabel.border = 1;
alarmLabel.position = Q.Position.CENTER_TOP;
alarmLabel.anchorPosition = Q.Position.CENTER_BOTTOM;
alarmLabel.fontSize = 9;
alarmLabel.padding = 3;
alarmLabel.backgroundColor = "#F00";
alarmLabel.borderRadius = 4;
oracle.addUI(alarmLabel);
效果如下：


其他程式碼

此外還有一些文字的設定（字型，對齊方式，大小，間距等等），以及連線的設定（箭頭） 

var graph;
function createText(label, x, y){
    var node = graph.createText(label, x, y);
    node.setStyle(Q.Styles.LABEL_BORDER, 1);
    node.setStyle(Q.Styles.LABEL_PADDING, 15);
    node.setStyle(Q.Styles.LABEL_BACKGROUND_COLOR, "#FFF");
    return node;
}

function createEdge(from, to){
    var edge = graph.createEdge(from, to);
    edge.setStyle(Q.Styles.ARROW_TO, Q.Consts.SHAPE_TRIANGLE);
    edge.setStyle(Q.Styles.ARROW_TO_SIZE, 6);
    edge.setStyle(Q.Styles.ARROW_TO_STROKE, false);
    edge.setStyle(Q.Styles.ARROW_TO_FILL_COLOR, "#000");
    return edge;
}
$(function(){
    graph = new Q.Graph("canvas");
    graph.zoomToOverview();

    var app = createText("應用主機", -50, 0);
    var node = createNodeWithBar("CPU佔用", 150, 0);
    createEdge(app, node);
    var node2 = createNodeWithBar("記憶體佔用", 150, 50);
    createEdge(app, node2);
    var tomcat = createText("Tomcat", -50, 150);
    tomcat.setStyle(Q.Styles.LABEL_ALIGN_POSITION, Q.Position.CENTER_TOP);
    tomcat.setStyle(Q.Styles.LABEL_FONT_SIZE, 20);
    tomcat.setStyle(Q.Styles.LABEL_SIZE, {width: 180, height: 80});
    var map = createText("mapi", -50, 170);
    map.anchorPosition = Q.Position.RIGHT_MIDDLE;
    map.setStyle(Q.Styles.LABEL_SIZE, {width: 60});
    var console = createText("console", -50, 170);
    console.anchorPosition = Q.Position.LEFT_MIDDLE;
    console.setStyle(Q.Styles.LABEL_SIZE, {width: 60});
    map.parent = map.host = tomcat;
    console.parent = console.host = tomcat;

    var edge = graph.createEdge(app, tomcat);
    edge.zIndex = 1;
    edge.setStyle(Q.Styles.EDGE_WIDTH, 6);
    edge.setStyle(Q.Styles.ARROW_TO, Q.Consts.SHAPE_TRIANGLE);
    edge.setStyle(Q.Styles.ARROW_TO_STROKE, false);
    edge.setStyle(Q.Styles.ARROW_TO_SIZE, 15);
    edge.setStyle(Q.Styles.ARROW_TO_FILL_COLOR, "#555");
    edge.setStyle(Q.Styles.ARROW_TO_OFFSET, {x: 10});
...

})
整體效果如下


本文轉載自：http://.qunee.com/2014/05/html5實現監控圖/

前端 HTML5 網路監控圖
評論(0)

相關文章