未定义OrgChart.js模块

Question

我正在尝试使用https://github.com/dabeng/OrgChart创建一个orgChart。我按照github代码库中所示执行了所有操作，但是当我尝试创建一个新的OrgChar时，我得到了未捕获的ReferenceError: OrgChart is not defined错误。js文件显示在浏览器的源代码中，但是我不明白为什么看不到这个模块。

下面是cshtml文件：

@{
    ViewData["Title"] = "Home Page";
}

<div class="org-chart-container">
    <button id="showChart" class="btn btn-danger" onclick="loadOrgChart()">Load chart</button>
    <div id="orgChart">
        <h5>Organigrama</h5>
    </div>
</div>

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/dist/js/jquery.orgchart.js"></script>
<script src="~/js/organizationChart.js"></script>

下面是js文件：

var loadOrgChart = () => {
    var datasource = {
        'name': 'Lao Lao',
        'title': 'general manager',
        'children': [
            { 'name': 'Bo Miao', 'title': 'department manager' },
            {
                'name': 'Su Miao', 'title': 'department manager',
                'children': [
                    { 'name': 'Tie Hua', 'title': 'senior engineer' },
                    {
                        'name': 'Hei Hei', 'title': 'senior engineer',
                        'children': [
                            { 'name': 'Dan Dan', 'title': 'engineer' }
                        ]
                    },
                    { 'name': 'Pang Pang', 'title': 'senior engineer' }
                ]
            },
            { 'name': 'Hong Miao', 'title': 'department manager' }
        ]
    };

    let chart = new OrgChart({
                'chartContainer': '#orgChart',
                'data': datasource,
                'nodeContent': 'title',
            })
            $('#orgChart').add(chart);
}

有人能告诉我我哪里做错了吗？是我调用模块的方式错误还是js文件的导入错误？这是我的文件的结构：

​

​

Answer 1

您将BALKANGraph/OrgChartJS和dabeng/OrgChart混合在一起。

将您的代码更改为：

let chart = new OrgChart({
            'chartContainer': '#orgChart',
            'data': datasource,
            'nodeContent': 'title',
        })
$('#orgChart').add(chart);

至：

$('#orgChart').orgchart({
    'data': datasource,
    'nodeContent': 'title'
});