go.js流程图

电力项目配置需要一个可以配置的万能流程图，选型技术为go.js。

拿到需求，老大说看一下go.js, so 现在官网上找了个demo，跑通。

然后需要的效果图如下：

然后改改demo成这样：

接着改颜色，思路：遍历出所有国网绿颜色的节点 依次找到节点间的连线 改变连线的属性（颜色宽度箭头颜色大小）。上代码：

/**
   * 查找所有需要的节点
   * @returns {}
   */
  
  function findAllNodes() {
      var arrStep = [];
      var everyStep = null;
      myDiagram.nodes.each(function(node) {
          if (node.data.hasOwnProperty('category') && node.data.category === 'blueStep') {
              everyStep = node;
              arrStep.push(everyStep); 
          } else {
               return false;
          }
          
      });
      return arrStep;
  };
  
  /**
   * 查找步骤之间的连线
   * @param nodes
   * @returns {Array}
   */
  function findFinishedLinks(steps) {

      var arrLinks = [];

      if (!steps || steps.length < 1) return arrLinks;

      var currStep = steps[0];// 【开始】步骤

      for (var i = 0; i < steps.length; i++) {

          var step = steps[i];

          // 连线
          var link = currStep.findLinksBetween(step).first();
          if (!link) continue;
          arrLinks.push(link);

          currStep = step;
      }

      return arrLinks;
  };
  
  
  /**
   * 改变所有“已完成”步骤的连线颜色
   * @param links
   */
  function showFinishedLinks(links) {

      if (!links) return;

      for (var i = 0; i < links.length; i++) {

          // 连线
          var link = links[i];
         /*  link.findObject("HIGHLIGHT").stroke = "#2DACA5";
          link.findObject("myArrow").fill = "#2DACA5";
          link.findObject("HIGHLIGHT").strokeWidth = 2; */
          myDiagram.startTransaction("vacate");
          myDiagram.model.setDataProperty(link.data, "stroke", (link.data.color ="#2DACA5"));
          myDiagram.model.setDataProperty(link.data, "stroke", (link.data.stroke = "#2DACA5"));
          myDiagram.model.setDataProperty(link.data, "fill", "#2DACA5");
          myDiagram.model.setDataProperty(link.data, "strokeWidth", 2);
          myDiagram.commitTransaction("vacate");
          
      /*  // 置于最上层，防止被遮挡
          myDiagram.startTransaction('modified zOrder');
          myDiagram.model.setDataProperty(link.data, "fill", "#2DACA5");
          myDiagram.model.setDataProperty(link.data, "zOrder", 2);
          myDiagram.commitTransaction('modified zOrder'); */
      }
  };

后期整理会把相关源码上传到git主页，，，，

转载于:https://my.oschina.net/u/3489292/blog/1600039