graph使泳道图的label横向显示

1、如果需要将label靠左边对齐，则必须重写底层源码

新增mxText的一个构造器，主要是增加了一个参数：x（代表当前的cell）

 function mxText(a, b, c, d, e, f, g, h, k, i, l, m, n, o, p, q, t, u, v, w, x) {
     this.value = a;
     this.bounds = b;
     this.color = e != null ? e : "black";
     this.align = c != null ? c : "";
     this.valign = d != null ? d : "";
     this.family = f != null ? f : mxConstants.DEFAULT_FONTFAMILY;
     this.size = g != null ? g : mxConstants.DEFAULT_FONTSIZE;
     this.fontStyle = h != null ? h : 0;
     this.spacing = 0;
     this.spacingTop = 0;
     //this.spacingRight = x.cell.geometry.height/2 - (this.size * 1.25 * a.length);
     this.spacingRight = 0;
     this.spacingBottom = 0;
     this.spacingLeft = 0;
     this.horizontal = true;
     this.background = p;
     this.border = q;
     this.wrap = t != null ? t : false;
     this.clipped = u != null ? u : false;
     this.overflow = v != null ? v : "visible";
     this.labelPadding = w != null ? w : 0
 }

重写createTabel方法

 mxCellRenderer.prototype.createLabel = function(a, b) {
     var c = a.view.graph;
     c.getModel().isEdge(a.cell);
     if (a.style[mxConstants.STYLE_FONTSIZE] > 0 || a.style[mxConstants.STYLE_FONTSIZE] == null) {
         var d = (c.isHtmlLabel(a.cell) || b != null && mxUtils.isNode(b)) && c.dialect == mxConstants.DIALECT_SVG;
         //alert(a.cell.value + '-' + b);
         //dongyj add :其中b=a.cell.value
         if (!a.cell.id && a.cell.id.indexOf("_swimlane") >= 0 && b) {
             a.text = new mxText(b, new mxRectangle, a.style[mxConstants.STYLE_ALIGN] || mxConstants.ALIGN_CENTER, c.getVerticalAlign(a), a.style[mxConstants.STYLE_FONTCOLOR], a.style[mxConstants.STYLE_FONTFAMILY], a.style[mxConstants.STYLE_FONTSIZE],
                 a.style[mxConstants.STYLE_FONTSTYLE], a.style[mxConstants.STYLE_SPACING], a.style[mxConstants.STYLE_SPACING_TOP], a.style[mxConstants.STYLE_SPACING_RIGHT], a.style[mxConstants.STYLE_SPACING_BOTTOM], a.style[mxConstants.STYLE_SPACING_LEFT], a.style[mxConstants.STYLE_HORIZONTAL], a.style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR], a.style[mxConstants.STYLE_LABEL_BORDERCOLOR], c.isWrapping(a.cell) && c.isHtmlLabel(a.cell), c.isLabelClipped(a.cell), a.style[mxConstants.STYLE_OVERFLOW], a.style[mxConstants.STYLE_LABEL_PADDING], a);
         } else {
             //alert(a.cell.geometry.width);
             //a.cell.geometry.height;

             a.text = new mxText(b, new mxRectangle, a.style[mxConstants.STYLE_ALIGN] || mxConstants.ALIGN_CENTER, c.getVerticalAlign(a), a.style[mxConstants.STYLE_FONTCOLOR], a.style[mxConstants.STYLE_FONTFAMILY], a.style[mxConstants.STYLE_FONTSIZE],
                 a.style[mxConstants.STYLE_FONTSTYLE], a.style[mxConstants.STYLE_SPACING], a.style[mxConstants.STYLE_SPACING_TOP], a.style[mxConstants.STYLE_SPACING_RIGHT], a.style[mxConstants.STYLE_SPACING_BOTTOM], a.style[mxConstants.STYLE_SPACING_LEFT], a.style[mxConstants.STYLE_HORIZONTAL], a.style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR], a.style[mxConstants.STYLE_LABEL_BORDERCOLOR], c.isWrapping(a.cell) && c.isHtmlLabel(a.cell), c.isLabelClipped(a.cell), a.style[mxConstants.STYLE_OVERFLOW], a.style[mxConstants.STYLE_LABEL_PADDING], a);
         }
         a.text.opacity = a.style[mxConstants.STYLE_TEXT_OPACITY];
         a.text.dialect = d ? mxConstants.DIALECT_STRICTHTML : a.view.graph.dialect;
         this.initializeLabel(a);
         var e = false,
             f = function(b) {
                 var d = a;
                 if (mxClient.IS_TOUCH || e) {
                     d = mxEvent.getClientX(b);
                     b = mxEvent.getClientY(b);
                     b = mxUtils.convertPoint(c.container, d, b);
                     d = c.view.getState(c.getCellAt(b.x, b.y))
                 }
                 return d
             },
             d = mxClient.IS_TOUCH ? "touchmove" : "mousemove",
             g = mxClient.IS_TOUCH ? "touchend" : "mouseup";
         mxEvent.addListener(a.text.node, mxClient.IS_TOUCH ? "touchstart" : "mousedown", mxUtils.bind(this, function(b) {
             if (this.isLabelEvent(a, b)) {
                 c.fireMouseEvent(mxEvent.MOUSE_DOWN, new mxMouseEvent(b, a));
                 e = c.dialect != mxConstants.DIALECT_SVG && mxEvent.getSource(b).nodeName == "IMG"
             }
         }));
         mxEvent.addListener(a.text.node, d, mxUtils.bind(this, function(b) {
             this.isLabelEvent(a, b) && c.fireMouseEvent(mxEvent.MOUSE_MOVE, new mxMouseEvent(b, f(b)))
         }));
         mxEvent.addListener(a.text.node, g, mxUtils.bind(this, function(b) {
             if (this.isLabelEvent(a, b)) {
                 c.fireMouseEvent(mxEvent.MOUSE_UP, new mxMouseEvent(b, f(b)));
                 e = false
             }
         }));
         mxEvent.addListener(a.text.node, "dblclick", mxUtils.bind(this, function(b) {
             if (this.isLabelEvent(a, b)) {
                 c.dblClick(b, a.cell);
                 mxEvent.consume(b)
             }
         }))
     }
 };

如果要求泳道的label居中，则不需要重写底层方法，只需要重写createLabel方法即可

 mxCellRenderer.prototype.createLabel = function(a, b) {
     var c = a.view.graph;
     c.getModel().isEdge(a.cell);
     if (a.style[mxConstants.STYLE_FONTSIZE] > 0 || a.style[mxConstants.STYLE_FONTSIZE] == null) {
         var d = (c.isHtmlLabel(a.cell) || b != null && mxUtils.isNode(b)) && c.dialect == mxConstants.DIALECT_SVG;

         /*****************泳道图样式修改start*******************/

         var tempSwinlaneHorizontal = a.style[mxConstants.STYLE_HORIZONTAL];
         if(c.isSwimlane(a.cell)){
           tempsHorizontal = true;
         }

         var tempSwinlaneVertical = c.getVerticalAlign(a);
         if(c.isSwimlane(a.cell)){
           tempSwinlaneVertical = 'middle';
         }
         /*****************泳道图样式修改end*******************/

         a.text = new mxText(b, new mxRectangle, a.style[mxConstants.STYLE_ALIGN] || mxConstants.ALIGN_CENTER, tempSwinlaneVertical, a.style[mxConstants.STYLE_FONTCOLOR], a.style[mxConstants.STYLE_FONTFAMILY], a.style[mxConstants.STYLE_FONTSIZE],
                 a.style[mxConstants.STYLE_FONTSTYLE], a.style[mxConstants.STYLE_SPACING], a.style[mxConstants.STYLE_SPACING_TOP], a.style[mxConstants.STYLE_SPACING_RIGHT], a.style[mxConstants.STYLE_SPACING_BOTTOM], a.style[mxConstants.STYLE_SPACING_LEFT], tempsHorizontal, a.style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR], a.style[mxConstants.STYLE_LABEL_BORDERCOLOR], c.isWrapping(a.cell) && c.isHtmlLabel(a.cell), c.isLabelClipped(a.cell), a.style[mxConstants.STYLE_OVERFLOW], a.style[mxConstants.STYLE_LABEL_PADDING]);
         a.text.opacity = a.style[mxConstants.STYLE_TEXT_OPACITY];
         a.text.dialect = d ? mxConstants.DIALECT_STRICTHTML : a.view.graph.dialect;
         this.initializeLabel(a);
         var e = false, f = function(b) {
             var d = a;
             if (mxClient.IS_TOUCH || e) {
                 d = mxEvent.getClientX(b);
                 b = mxEvent.getClientY(b);
                 b = mxUtils.convertPoint(c.container, d, b);
                 d = c.view.getState(c.getCellAt(b.x, b.y))
             }
             return d
         }, d = mxClient.IS_TOUCH ? "touchmove" : "mousemove", g = mxClient.IS_TOUCH ? "touchend" : "mouseup";
         mxEvent.addListener(a.text.node, mxClient.IS_TOUCH ? "touchstart" : "mousedown", mxUtils.bind(this, function(b) {
             if (this.isLabelEvent(a, b)) {
                 c.fireMouseEvent(mxEvent.MOUSE_DOWN, new mxMouseEvent(b, a));
                 e = c.dialect != mxConstants.DIALECT_SVG && mxEvent.getSource(b).nodeName == "IMG"
             }
         }));
         mxEvent.addListener(a.text.node, d, mxUtils.bind(this, function(b) {
             this.isLabelEvent(a, b) && c.fireMouseEvent(mxEvent.MOUSE_MOVE, new mxMouseEvent(b, f(b)))
         }));
         mxEvent.addListener(a.text.node, g, mxUtils.bind(this, function(b) {
             if (this.isLabelEvent(a, b)) {
                 c.fireMouseEvent(mxEvent.MOUSE_UP, new mxMouseEvent(b, f(b)));
                 e = false
             }
         }));
         mxEvent.addListener(a.text.node, "dblclick", mxUtils.bind(this, function(b) {
             if (this.isLabelEvent(a, b)) {
                 c.dblClick(b, a.cell);
                 mxEvent.consume(b)
             }
         }))
     }
 };