Vis.js

Question

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

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

以上几行导致以下代码行：

在我的脚本中：

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 中，我在 Region Source 部分添加了所需的 div：

<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

为避免评论部分过于冗长/笨拙，我将 post 此处添加一些内容，并在进行过程中更新答案

我不太确定，所以我会尝试提供一些尝试的指示。

你现在是 apex 4.2。不要使用 HTML header 来放入脚本标签。您有专门的字段来放入脚本链接，CSS.

也是如此

简单地说

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

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

喜欢这个是有原因的。放在这里的脚本很可能会放在页面末尾附近，这取决于页面模板的设置方式。它很可能是在顶点 javascript （和依赖项）文件之后，这通常是一件好事。

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

验证模块是否已加载。不要只看来源html。实际上单击源代码中的链接 html 并查看是否获得所需的文件，或者查看是否在开发控制台中出现错误。

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

您确定没有遗漏依赖项吗？例如，vis 是否需要 jquery？

运行页面处于调试模式，因此您将加载可用的完整源代码。这将使您不必尝试搜索难以辨认的缩小代码。

Vis.js - 在 APEX 中未定义

Vis.js - vis undefined in APEX

javascript

oracle-apex

vis.js-network