爆强的树插件orgchart

帮一个做家谱管理的同学解决前端展示树形图的问题，偶然发现一个爆强的插件orgchart 。

实现思路：

1、使用了springboot + freemark 的搭配。

2、查询所有的相关数据，利用freemark 在展示页面内的拼凑全局变量的符合格式的数组。

3、使用js，循环该数组，添加数据到数组中。

4、数据添加完毕，插件渲染效果。

样例代码：

<script>
    var data = [
    // 此处使用freemark 拼凑出需要的数据
    ];
</script> 
<canvas id="canvas1" width="800" height="600"></canvas>

<script type="text/javascript">
    var o = new orgChart();
        for（） {
        o.addNode('', '', '', 'Root node');// 利用for循环把数据添加到插件中;
        } 
       o.drawChart('canvas1');
 </script>

 

官方demo：https://jvloenen.home.xs4all.nl/orgchart/sample.htm