Vis.js - 在APEX中未定义

Question

我正在尝试将vis.js功能集成到Oracle Application Express中，但我似乎无法使其工作。

如果我单独运行脚本，它可以正常运行，但是当我尝试在APEX中加载脚本（vis.min.css）/（vis.min.js）时，我得到：SCRIPT5009: 'vis' is undefined和SCRIPT1028: Expected identifier, string or number in安慰。

以上行导致以下代码行：

• 在我的脚本中： var parsedData = vis.network.convertDot(DOTstring); --> vis is undefined
• 在vis.min.js： (...)function o(t){return t&&t.__esModule?t:{default:t}}var n=i(2),s=o(n),r=i(55),a=o(r) (...) -> Expected identifier, string or number

vis.min.js / vis.min.css和draw_diagram.js作为静态文件加载到APEX（在“共享组件”部分下），并在HTML Header部分中定义如下：

<script src="#APP_IMAGES#vis#MIN#.js" type="text/javascript"></script>
<link rel="stylesheet" href="#APP_IMAGES#vis#MIN#.css" type="text/css">

<script src="#APP_IMAGES#draw_diagram.js" type="text/javascript"></script>

在Page Template Body我在div部分添加了所需的Region Source：

<div id="my_network"></div>

但是，当我应用更改并转到HTML页面查看结果时，我只能在控制台中看到上述错误。

我也尝试从CDN加载文件，但结果是一样的。

自定义脚本如下所示：

var DOTstring = "some_dot_config_string_here";
var parsedData = vis.network.convertDot(DOTstring);
var container = document.getElementById('my_network');

var data = {
    nodes: parsedData.nodes,
    edges: parsedData.edges
};

var options = {
    layout: {
        hierarchical: {
            direction: "UD",
            sortMethod: "directed",
            nodeSpacing: 250
        }
    },
    physics: false,
    interaction: {
        dragNodes: false,
        dragView: true,
        navigationButtons: true
    }
};

// create a network
var network = new vis.Network(container, data, options);
network.setSize('1800px', '840px');
network.redraw();

关于为什么会这样的想法？

Answer 1

为了避免过于冗长/笨拙的评论部分，我会在这里发布一些内容，我会随着时间的推移更新答案

---

我不太确定，所以我会试着给出一些尝试。

你是在顶点4.2。不要使用HTML标头来放置脚本标记。您有专门的字段来放置脚本链接，CSS也是如此。

简单的说

#APP_IMAGES#vis#MIN#.js
#APP_IMAGES#draw_diagram.js

在javascript文件框中，为CSS执行相同操作。

有理由更喜欢这个。根据页面模板的设置方式，放在这里的脚本很可能会放在页面的末尾。它很可能是在apex javascript（和依赖项）文件之后，这通常是一件好事。

请注意，你在这里使用#MIN#。这意味着当页面未处于调试模式时，将使用缩小的文件。在调试模式下，使用完整的源（不是'.min'）。确保您有两个文件可用。

验证模块已加载。不要只看源html。实际上点击源html中的链接，看看你是否得到了你需要的文件，或者看看你是否在开发控制台中收到错误。

通过从开发控制台运行它来验证加载的模块或代码。这是一个简单的检查。

你确定没有缺少依赖项吗？ vis是否需要jquery例如？

在调试模式下运行页面，这样您就可以在可用的地方加载完整的源代码。这将使您不必尝试通过难以辨认的缩小代码进行搜索。