项目作者: bitterbit

项目描述 :
FlowJS allows you to render dynamic, animated flow charts using HTML5 canvas
高级语言: JavaScript
项目地址: git://github.com/bitterbit/flowjs.git
创建时间: 2015-11-06T20:49:10Z
项目社区:https://github.com/bitterbit/flowjs

开源协议:MIT License

下载


FlowJS

Simple HTML5 flow chart using the canvas element.
FlowJS allows you to render dynamic, animated flow charts using HTML5 canvas with the help of CreateJs.
No more complex graphs and endles zooming.
Any contribution or suggestion will be welcomed

Visit https://prufer.surge.sh/ for a live demo! (using flowjs to display prufer trees)

Usage

flow chart example

  1. <script type="text/javascript" src="lib/createjs-2015.05.21.min.js"></script>
  2. <script type="text/javascript" src="flow.min.js"></script>
  1. <canvas id="canvasID" width="500" height="300"></canvas>
  1. var graph = new flowjs.DiGraph();
  2. graph.addPaths([
  3. ["Peter Q", "Gamora", "Nova Prime", "Rocket"],
  4. ["Drax", "Groot", "Rocket"],
  5. ["Merdith Q", "Groot"]
  6. ]);
  7. new flowjs.DiFlowChart("canvasID", graph).draw();

Advanced Usage

Here we show how to update a node after we draw it
We simulate an app the loads data about the node in the background and when its ready, updates the displayed chart

flow chart loading example

  1. var graph = new flowjs.DiGraph();
  2. // ... init the graph
  3. new flowjs.DiFlowChart(graph, "canvasID").draw();
  4. // this function simulates loading a flow chart and coloring parts of it
  5. // we simulate loading using the setTimeout function
  6. function simuLoad(flowChart, graph){
  7. // helps walk over all the graphs nodes
  8. var walker = new flowjs.GraphWalker(graph);
  9. walker.forEach(function(node){
  10. var start = Math.random() * 1000 * 5;
  11. var dur = Math.random() * 1000 * 5;
  12. simulateLoading(node.id, start);
  13. simulateDoneLoading(node.id, start + dur);
  14. }, this);
  15. // start running an animation on the given iten
  16. function simulateLoading(itemId, timeout){
  17. setTimeout(function(){
  18. flowChart.updateItem(itemId, function(item){
  19. item.flowItem.toggleFlashing();
  20. });
  21. }, timeout);
  22. }
  23. // stop the animation on the item and color it
  24. function simulateDoneLoading(itemId, timeout){
  25. setTimeout(function(){
  26. flowChart.updateItem(itemId, function(item){
  27. item.flowItem.toggleFlashing();
  28. item.flowItem.color = "cyan";
  29. if (item.connectors === undefined){return;}
  30. item.connectors.forEach(function(conn){
  31. conn.color = "cyan";
  32. });
  33. });
  34. }, timeout);
  35. }
  36. }

License

flowjs is available under the MIT License