svg.js

ntop网络监控软件,使用方面

/*
    PlotKit SVG
    ===========
    SVG Renderer for PlotKit

    Copyright
    ---------
    Copyright 2005,2006 (c) Alastair Tse <alastair^liquidx.net>
    For use under the BSD license. <http://www.liquidx.net/plotkit>
*/

// -------------------------------------------------------------------------
// NOTES: - If you use XHTML1.1 strict, then you must include each MochiKit
//          file individuall.
//        - For IE support, you must include the AdobeSVG object hack.
//          See tests/svg.html for details.
// -------------------------------------------------------------------------
// -------------------------------------------------------------------------
// Check required components
// -------------------------------------------------------------------------

try {    
    if (typeof(PlotKit.Layout) == 'undefined')
    {
        throw "";    
    }
} 
catch (e) {    
    throw "PlotKit depends on MochiKit.{Base,Color,DOM,Format} and PlotKit.Layout"
}


// ---------------------------------------------------------------------------
//  SVG Renderer
// ---------------------------------------------------------------------------

PlotKit.SVGRenderer = function(element, layout, options) {
    if (arguments.length > 0) 
        this.__init__(element, layout, options);
};

PlotKit.SVGRenderer.NAME = "PlotKit.SVGRenderer";
PlotKit.SVGRenderer.VERSION = PlotKit.VERSION;

PlotKit.SVGRenderer.__repr__ = function() {
    return "[" + this.NAME + " " + this.VERSION + "]";
};

PlotKit.SVGRenderer.toString = function() {
    return this.__repr__();
}

PlotKit.SVGRenderer.SVGNS = 'http://www.w3.org/2000/svg';

PlotKit.SVGRenderer.prototype.__init__ = function(element, layout, options) {
    var isNil = MochiKit.Base.isUndefinedOrNull;

    // default options
    this.options = {
        "drawBackground": true,
        "backgroundColor": Color.whiteColor(),
        "padding": {left: 30, right: 30, top: 5, bottom: 10},
        "colorScheme": PlotKit.Base.palette(PlotKit.Base.baseColors()[1]),
        "strokeColor": Color.whiteColor(),
        "strokeColorTransform": "asStrokeColor",
        "strokeWidth": 0.5,
        "shouldFill": true,
        "shouldStroke": true,
        "drawXAxis": true,
        "drawYAxis": true,
        "axisLineColor": Color.blackColor(),
        "axisLineWidth": 0.5,
        "axisTickSize": 3,
        "axisLabelColor": Color.blackColor(),
        "axisLabelFont": "Arial",
        "axisLabelFontSize": 9,
        "axisLabelWidth": 50,
        "axisLabelUseDiv": true,
        "pieRadius": 0.4,
        "enableEvents": true
    };

    MochiKit.Base.update(this.options, options ? options : {});
    this.layout = layout;
    this.element = MochiKit.DOM.getElement(element);
    this.container = this.element.parentNode;
    this.height = parseInt(this.element.getAttribute("height"));
    this.width = parseInt(this.element.getAttribute("width"));
    this.document = document;
    this.root = this.element;

    // Adobe SVG Support:
    // - if an exception is thrown, then no Adobe SVG Plugin support.
    try {
        this.document = this.element.getSVGDocument();
        this.root = isNil(this.document.documentElement) ? this.element : this.document.documentElement;
    }
    catch (e) {
    }

    this.element.style.zIndex = 1;

    if (isNil(this.element))
        throw "SVGRenderer() - passed SVG object is not found";

    if (isNil(this.container) || this.container.nodeName.toLowerCase() != "div")
        throw "SVGRenderer() - No DIV's around the SVG.";

    // internal state
    this.xlabels = new Array();
    this.ylabels = new Array();

    // initialise some meta structures in SVG
    this.defs = this.createSVGElement("defs");

    this.area = {
        x: this.options.padding.left,
        y: this.options.padding.top,
        w: this.width - this.options.padding.left - this.options.padding.right,
        h: this.height - this.options.padding.top - this.options.padding.bottom
    };

    MochiKit.DOM.updateNodeAttributes(this.container, 
    {"style":{ "position": "relative", "width": this.width + "px"}});

    
};


PlotKit.SVGRenderer.prototype.render = function() {
    if (this.options.drawBackground)
        this._renderBackground();

    if (this.layout.style == "bar") {
        this._renderBarChart();
        this._renderBarAxis();
    }
    else if (this.layout.style == "pie") {
        this._renderPieChart();
        this._renderPieAxis();
    }
    else if (this.layout.style == "line") {
        this._renderLineChart();
        this._renderLineAxis();
    }
};

PlotKit.SVGRenderer.prototype._renderBarOrLine = function(data, plotFunc, startFunc, endFunc) {
    
    var colorCount = this.options.colorScheme.length;
    var colorScheme = this.options.colorScheme;
    var setNames = MochiKit.Base.keys(this.layout.datasets);
    var setCount = setNames.length;

    for (var i = 0; i < setCount; i++) {
        var setName = setNames[i];
        var attrs = new Array();
        var color = colorScheme[i%colorCount];

        if (this.options.shouldFill)
            attrs["fill"] = color.toRGBString();
        else
            attrs["fill"] = "none";

        if (this.options.shouldStroke && 
            (this.options.strokeColor || this.options.strokeColorTransform)) {
            if (this.options.strokeColor)
                attrs["stroke"] = this.options.strokeColor.toRGBString();
            else if (this.options.strokeColorTransform)
                attrs["stroke"] = color[this.options.strokeColorTransform]().toRGBString();
            attrs["strokeWidth"] = this.options.strokeWidth;
        }

        if (startFunc)
            startFunc(attrs);

        var forEachFunc = function(obj) {
            if (obj.name == setName)
                plotFunc(attrs, obj);
        };                

        MochiKit.Iter.forEach(data, bind(forEachFunc, this));
        if (endFunc)
            endFunc(attrs);
    }
};

PlotKit.SVGRenderer.prototype._renderBarChart = function() {
    var bind = MochiKit.Base.bind;

    var drawRect = function(attrs, bar) {
        var x = this.area.w * bar.x + this.area.x;
        var y = this.area.h * bar.y + this.area.y;
        var w = this.area.w * bar.w;
        var h = this.area.h * bar.h;
        this._drawRect(x, y, w, h, attrs);
    };
    this._renderBarOrLine(this.layout.bars, bind(drawRect, this));
};

PlotKit.SVGRenderer.prototype._renderLineChart = function() {
    var bind = MochiKit.Base.bind;

    var addPoint = function(attrs, point) {
        this._tempPointsBuffer += (this.area.w * point.x + this.area.x) + "," +
                                 (this.area.h * point.y + this.area.y) + " ";
    };

    var startLine = function(attrs) {
        this._tempPointsBuffer = "";
        this._tempPointsBuffer += (this.area.x) + "," + (this.area.y+this.area.h) + " ";
    };

    var endLine = function(attrs) {
        this._tempPointsBuffer += (this.area.w + this.area.x) + ","  +(this.area.h + this.area.y);
        attrs["points"] = this._tempPointsBuffer;
        var elem = this.createSVGElement("polygon", attrs);
        this.root.appendChild(elem);
    };

    this._renderBarOrLine(this.layout.points, 
                          bind(addPoint, this), 
                          bind(startLine, this), 
                          bind(endLine, this));
};


PlotKit.SVGRenderer.prototype._renderPieChart = function() {
    var colorCount = this.options.colorScheme.length;
    var slices = this.layout.slices;

    var centerx = this.area.x + this.area.w * 0.5;
    var centery = this.area.y + this.area.h * 0.5;
    var radius = Math.min(this.area.w * this.options.pieRadius, 
                          this.area.h * this.options.pieRadius);

    // NOTE NOTE!! Canvas Tag draws the circle clockwise from the y = 0, x = 1
    // so we have to subtract 90 degrees to make it start at y = 1, x = 0

	// workaround if we only have 1 slice of 100%
	if (slices.length == 1 && (Math.abs(slices[0].startAngle) - Math.abs(slices[0].endAngle) < 0.1)) {
        var attrs = {"cx": centerx , "cy": centery , "r": radius };
        var color = this.options.colorScheme[0];
        if (this.options.shouldFill)
            attrs["fill"] = color.toRGBString();
        else
            attrs["fill"] = "none";

        if (this.options.shouldStroke && 
            (this.options.strokeColor || this.options.strokeColorTransform)) {
            if (this.options.strokeColor)
                attrs["stroke"] = this.options.strokeColor.toRGBString();
            else if (this.options.strokeColorTransform)
                attrs["stroke"] = color[this.options.strokeColorTransform]().toRGBString();
            attrs["style"] = "stroke-width: " + this.options.strokeWidth;
        }

        this.root.appendChild(this.createSVGElement("circle", attrs));
        return;
	}

    for (var i = 0; i < slices.length; i++) {
        var attrs = new Array();
        var color = this.options.colorScheme[i%colorCount];
        if (this.options.shouldFill)
            attrs["fill"] = color.toRGBString();
        else
            attrs["fill"] = "none";

        if (this.options.shouldStroke &&
            (this.options.strokeColor || this.options.strokeColorTransform)) {
            if (this.options.strokeColor)
                attrs["stroke"] = this.options.strokeColor.toRGBString();
            else if (this.options.strokeColorTransform)
                attrs["stroke"] = color[this.options.strokeColorTransform]().toRGBString();
            attrs["style"] = "stroke-width:" + this.options.strokeWidth;
        }

        var largearc = 0;
        if (Math.abs(slices[i].endAngle - slices[i].startAngle) > Math.PI)
            largearc = 1;
        var x1 = Math.cos(slices[i].startAngle - Math.PI/2) * radius;
        var y1 = Math.sin(slices[i].startAngle - Math.PI/2) * radius;
        var x2 = Math.cos(slices[i].endAngle - Math.PI/2) * radius;
        var y2 = Math.sin(slices[i].endAngle - Math.PI/2) * radius;
        var rx = x2 - x1;
        var ry = y2 - y1;

        var pathString = "M" + centerx + "," + centery + " ";       
        pathString += "l" + x1 + "," + y1 + " ";
        pathString += "a" + radius + "," + radius + " 0 " + largearc + ",1 " + rx + "," + ry + " z";

        attrs["d"] = pathString;

        var elem = this.createSVGElement("path", attrs);
        this.root.appendChild(elem);
    }
};

PlotKit.SVGRenderer.prototype._renderBarAxis = function() {
    this._renderAxis();
}

PlotKit.SVGRenderer.prototype._renderLineAxis = function() {
    this._renderAxis();
};


PlotKit.SVGRenderer.prototype._renderAxis = function() {

    if (!this.options.drawXAxis && !this.options.drawYAxis)
        return;

    var labelStyle = {"style":
         {"position": "absolute",
          "textAlign": "center",
          "fontSize": this.options.axisLabelFontSize + "px",
          "zIndex": 10,
          "color": this.options.axisLabelColor.toRGBString(),
          "width": this.options.axisLabelWidth + "px",
          "overflow": "hidden"
         }
    };

    // axis lines
    var lineAttrs = {
        "stroke": this.options.axisLineColor.toRGBString(),
        "strokeWidth": this.options.axisLineWidth
    };
    

    if (this.options.drawYAxis) {
        if (this.layout.yticks) {
            var drawTick = function(tick) {
                var x = this.area.x;
                var y = this.area.y + tick[0] * this.area.h;
                this._drawLine(x, y, x - 3, y, lineAttrs);
                
                if (this.options.axisLabelUseDiv) {
                    var label = DIV(labelStyle, tick[1]);
                    label.style.top = (y - this.options.axisLabelFontSize) + "px";
                    label.style.left = (x - this.options.padding.left + this.options.axisTickSize) + "px";
                    label.style.textAlign = "left";
                    label.style.width = (this.options.padding.left - 3) + "px";
                    MochiKit.DOM.appendChildNodes(this.container, label);
                    this.ylabels.push(label);
                }
                else {
                    var attrs = {
                        y: y + 3,
                        x: (x - this.options.padding.left + 3),
                        width: (this.options.padding.left - this.options.axisTickSize) + "px",
                        height: (this.options.axisLabelFontSize + 3) + "px",