2

这是一个 JSF 2.3，Primefaces 10 项目。

文件 vivagraph.js 是从这里下载的，它包含在项目中，如下所示：

文件组织截图

xhtml页面：

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
        <title>VivaGraphJs test page</title>
        <h:outputScript name="js/vivagraph.js" />
        <script type='text/javascript'>
            function onLoad() {
                var g = Viva.Graph.graph();
                g.addLink('space', 'bar');
                console.log("test print");
            }
        </script>
    </h:head>
    <h:body onload="onLoad()">

    </h:body>
</html>

注意：这是改编自Vivagraph.js wiki 上的基本示例。

当页面加载时，它保持空白。我希望看到一个图表，其中 2 个节点“space”和“bar”通过 link 连接。控制台打印“测试打印”，没有显示错误。

如果这有帮助，则生成的 html：

<html xmlns="http://www.w3.org/1999/xhtml">
    <head id="j_idt2">
        <link type="text/css" rel="stylesheet" href="/nocodeapp-web-front/javax.faces.resource/theme.css.html?ln=primefaces-saga&amp;v=10.0.0" /><link type="text/css" rel="stylesheet" href="/nocodeapp-web-front/javax.faces.resource/primeicons/primeicons.css.html?ln=primefaces&amp;v=10.0.0" />
        <title>VivaGraphJs test page</title>
    </head>
    <body onload="onLoad()">
        <script type="text/javascript" src="/nocodeapp-web-front/javax.faces.resource/js/vivagraph.js.html">
        </script>
        <script id="6c6d9708-4b65-4406-a8e0-d8c24b8afb86" type="text/javascript">
        var pf=window.PrimeFaces;if(pf){pf.settings.locale='fr_FR';pf.settings.viewId='/cowo/graph.xhtml';pf.settings.contextPath='/nocodeapp-web-front';pf.settings.cookiesSecure=false;pf.settings.partialSubmit=true;};

            function onLoad() {
                var g = Viva.Graph.graph();
                g.addLink('space', 'bar');
                console.log("test print");
            }
        ;if(window.$){$(PrimeFaces.escapeClientId("6c6d9708-4b65-4406-a8e0-d8c24b8afb86")).remove();}
        </script>
    </body>
</html>
4

1 回答 1

0

解决方案是在 xhtml 页面底部添加此脚本：

<style type="text/css" media="screen">
    html, body, svg { width: 100%; height: 100%;}
</style>
于 2021-07-02T14:40:28.593 回答