我有一个示例GoJS的代码,由于某些原因它无法正常工作,在加载页面时显示为空

时间:2018-12-18 15:00:30

标签: html gojs

我尝试了所有可能的方法来使其工作。无法在我的代码中找到错误,仍然在加载时出现空白页。任何帮助将不胜感激。

<!DOCTYPE html>
<html>
<head>
<title>Flowchart</title>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.35/go.js"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.35/go-debug.js"/>
</head>

<body>

<div id="myDiagramDiv" style="width:400px; height:150px;"></div>
<script >
 window.onload = function () {
    var $ = go.GraphObject.make;
    var myDiagram = $(go.Diagram, "myDiagramDiv");
    var nodeDataArray = [
     {key : "Alpha"},
     {key : "Beta"}
    ];
    var linkDataArray = [
     {to : "Beta", from: "Alpha"}
    ];
     myDiagram.model = new go.GraphLinksModel(nodeDataArray , linkDataArray 
    );
  } 

 </script>
</body>
</html>

2 个答案:

答案 0 :(得分:1)

如果有人在寻找分辨率,那么可能会有所帮助,因此请在此处发布。

您在代码中犯了几个错误:

  1. 您正在<script>元素后面的init元素中加载div函数,这是错误的。您应该将其放在头部。
  2. 您根本不会在文档加载时调用init函数。它应包含在body标记中。

复制粘贴此代码并进行测试,它应该可以工作:

<!DOCTYPE html>
<html>
    <head>
    <title>Flowchart</title>
    <link rel="icon" href="images/logo.jpg">
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.35/go.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.35/go-debug.js"></script>
        <script>
            function init() {
                var $               =   go.GraphObject.make;
                var myDiagram       =   $(go.Diagram, "myDiagramDiv");
                var nodeDataArray   =   [
                                            {key : "Alpha"},
                                            {key : "Beta"}
                                        ];
                                        
                var linkDataArray   =   [
                                         {to : "Beta", from: "Alpha"}
                                        ];
                myDiagram.model     =   new go.GraphLinksModel(nodeDataArray , linkDataArray);
            } 

         </script>
    </head>

    <body onload="init()">
        <div id="myDiagramDiv" style="width:300px;height:300px;border:1px solid black"></div>
    </body>

</html>

答案 1 :(得分:0)

您在第12行缺少引号:

<div id="myDiagramDiv" style="width:400px; height:150px; ></div>
                                                        ^

并且您不应该自行关闭script标签(请参见Matias Meno的To close or not to close)。

<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.35/go.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.35/go-debug.js"></script>