组织结构图OrgChart.js

环境配置

先引入两个文件：
<link href="https://fonts.googleapis.com/css?family=Gochi+Hand" rel="stylesheet">
<script type="text/jscript" src="https://balkangraph.com/js/latest/OrgChart.js"></script>
先看一下简单的demo：
HTML部分很简单：
<div id="chart-container"></div>
js部分初始化：

初始化

	var chart = new OrgChart(document.getElementById("chart-container"), {
   
        nodeBinding: {
   
            field_0: "name",
        },
        nodes: [
            {
    id: 1, name: "Denny Curtis"},
            {
    id: 2, pid: 1, name: "Ashley Barnett" },
            {
    id: 3, pid: 1, name: "Caden Ellison" },
            {
    id: 4, pid: 2, name: "Elliot Patel" },
        ]
    });

导出

如果要将生成的组织结构图导出的话：

	  var chart = new OrgChart(document.getElementById("chart-container"), {
   
        menu: {
   
            pdf: {
    text: "Export PDF" },
            png: {
    text: "Export PNG" },
            svg: {
    text: "Export SVG" },
            csv: {
    text: "Export CSV" }
        },
        nodeMenu: {
   
            pdf: {
    text: "Export PDF" },
            png: {
    text: "Export PNG" },
            svg: {
    text: "Export SVG" }
        },
        ... 
    });

默认情况下折叠之后的子节点不会导出，如果要更改必须添加自己的导出节点菜单项

	function pdf(nodeId) {
   
            chart.exportPDF({
   filename: "MyFileName.pdf", expandChildren: true, nodeId: nodeId});
        }
    function png(nodeId) {
   
            chart.exportPNG({
   filename: "MyFileName.png", expandChildren: true, nodeId: nodeId});
        }
    function svg(nodeId) {
   
            chart.exportSVG({
   filename: "MyFileName.svg", expandChildren: true, nodeId: nodeId});
        }

    var chart = new OrgChart(document.getElementById("chart-container"), {
   
       menu: {
   
                export_pdf: {
   
                    text: "Export PDF",
                    icon: OrgChart.icon.pdf(24, 24, "#7A7A7A"),
                    onClick: pdf
                },
                export_png: {
   
                    text: "Export PNG",
                    icon: OrgChart.icon.png(24, 24, "#7A7A7A"),
                    onClick: png
                },
                export_svg: {
   
                    text: "Export SVG",
                    icon: OrgChart.icon.svg(24, 24, "#7A7A7A"),
                    onClick: svg
                }
            },
            nodeMenu: {
   
                export_pdf: {
   
                    text: "Export PDF",
                    icon: OrgChart.icon.pdf(24, 24, "#7A7A7A"),
                    onClick: pdf
                },
                export_png: {
   
                    text: "Export PNG",
                    icon: OrgChart.icon.png(24, 24, "#7A7A7A"),
                    onClick: png
                },
                export_svg: {
   
                    text: "Export SVG",
                    icon: OrgChart.icon.svg(24, 24, "#7A7A7A"),
                    onClick: svg
                }
            },
            ...
      });    

导出为A4格式：

 		function pdf(nodeId) {
   
           chart.exportPDF({
   
              format: "A4"
           }