go.js flow chart

Power project configuration requires a configurable universal flow chart, and the selection technology is go.js.

After getting the demand, the boss said to take a look at go.js, so now I found a demo on the official website and it worked.

Then the required renderings are as follows:

Then change the demo to this:

Then change the color, the idea: traverse all the nodes of the green color of the national network, find the connection between the nodes in turn, and change the attributes of the connection (color width arrow color size). Above code:

/**
* Find all required nodes
* @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;
};

/**
* find Links between steps
* @param nodes
* @returns {Array}
*/
function findFinishedLinks(steps) {

var arrLinks = [];

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

var currStep = steps[0];// [Start] step

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;
};

/**
* Change the link color of all "finished" steps
* @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); /* // Put it on the top layer to prevent occlusion
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'); */
}
};

After finishing, the relevant source code will be uploaded to the git homepage,,,,

Guess you like