Question

我正在尝试为我的webapp构建一个编辑器，它有一个可编辑的层次结构，我正在思考一些组织图表可视化（或库），它有一个开放的API来动态操作层次结构。我的要求是它必须离线，因此Google Visualization已经用完了，我花了一些时间调整Basic Primitives，发现它不提供方法调用就像“获取所选项目”一样简单。我花了几天时间寻找无济于事，所以非常令人沮丧。有没有人知道我可以使用的任何简单的小部件或库？谢谢！

Answer 1

让我知道以下代码段是否可以帮助您入门。只需将其复制并粘贴到HTML文件

即可

<html>
<head>
    <title>GetOrgChart</title>
    <script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'></script>
    <script type='text/javascript' src="//www.getorgchart.com/GetOrgChart/getorgchart-1.1/getorgchart.js"></script>
    <link rel="stylesheet" type="text/css" href="//www.getorgchart.com/GetOrgChart/getorgchart-1.1/getorgchart.css" />

    <style type='text/css'>
        html, body {margin: 0px;padding: 0px;height: 100%;overflow: hidden;}
        #people {width: 100%;height: 100%;}
    </style>
</head>
<body>
    <table id="peopleTable" style="display: none;">
        <tr>
            <th>id</th>
            <th>parent id</th>
            <th>Name</th>
            <th>Title</th>
        </tr>
        <tr>
            <td>1</td>
            <td></td>
            <td>Lesley Holmes</td>
            <td>CEO</td>
        </tr>
        <tr>
            <td>2</td>
            <td>1</td>
            <td>Colin Patricia</td>
            <td>Manager</td>
        </tr>
        <tr>
            <td>3</td>
            <td>1</td>
            <td>Derek Cork</td>
            <td>Manager</td>
        </tr>
    </table>

    <div id="people"></div>

    <script type='text/javascript'>
        $('#people').getOrgChart({
            dataSource: document.getElementById("peopleTable")
        });
    </script>
</body>
</html>

层次结构构建器可视化

1 个答案: