OrgChart.js 模块未定义

Question

我正在尝试使用 https://github.com/dabeng/OrgChart 创建一个 orgChart。我按照 github repo 中所示做了所有事情，但是当我尝试创建一个新的 OrgChar 时，我得到了 Uncaught 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'
});