javascript - Vis.js - APEX 中未定义的 vis

Question

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

如果我单独运行脚本，它会正常工作，但是当我尝试在 APEX 中加载脚本 (vis.min.css)/(vis.min.js) 时，我得到: SCRIPT5009:'vis'未定义和SCRIPT1028:控制台中预期的标识符、字符串或数字。

上面的行导致以下代码行:

• 在我的脚本中:

  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 中作为静态文件加载(在 Shared 下) Components 部分)并在 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>

在页面模板正文中，我在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

为了避免过于冗长/笨拙的评论部分，我将在这里发布一些内容，并在我们进行过程中更新答案

<小时/>

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

您正在使用 apex 4.2。不要使用 HTML header 来放入脚本标记。您可以使用专用字段来放入脚本链接，CSS 也是如此。

简单来说

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

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

有理由喜欢这个。根据页面模板的设置方式，此处放置的脚本很可能会放置在页面末尾附近。它很可能位于 apex javascript(和依赖项)文件之后，这通常是一件好事。

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

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

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

您确定没有缺少任何依赖项吗？例如vis需要jquery吗？

在 Debug模式下运行页面，以便您加载可用的完整源代码。这将使您不必尝试浏览难以辨认的缩小代码。