Javascript 在for循环上迭代vis.js图(yii2框架)

Javascript 在for循环上迭代vis.js图(yii2框架),javascript,yii2,vis.js,sequence-diagram,vis.js-network,Javascript,Yii2,Vis.js,Sequence Diagram,Vis.js Network,我正在使用vis.js使用一些数据创建一个图表。但是我需要根据变量的大小得到多个图表。我的代码看起来像这样 <?php for($j=0;$j<4);$j++){ ?> <tr> <td><style>#mynetwork { width: 850px; height: 500px;

我正在使用vis.js使用一些数据创建一个图表。但是我需要根据变量的大小得到多个图表。我的代码看起来像这样

<?php for($j=0;$j<4);$j++){ ?> 
            <tr>    
            <td><style>#mynetwork {
                        width: 850px;
                        height: 500px;
                        border: 1px solid gray;
                        }
                </style>
            <div class=".mycontainer"><div id="mynetwork"></div></div><!--?php echo($sesid5["$j"]);?><p>&darr;</p--></td>
            <script>
            var nodes = [
                { id: 1, label: "  Mobile Device  ", x: 0, y: 0, fixed: true ,color: "#FB7E81" , shape: "box"},
                { id: 2, label: "  USSD gateway  ", x: 350, y: 0, fixed: true ,color: "#FB7E81" , shape: "box"},
                { id: 3, label: "  Application  ", x: 700, y: 0, fixed: true ,color: "#FB7E81" , shape: "box"},
                { id: 4, label: "  Mobile Device  ", x: 0, y: 300, fixed: true ,color: "#FB7E81" ,shape: "box" },
                { id: 5, label: "  USSD Gateway  ", x: 350, y: 300, fixed: true ,color: "#FB7E81" ,shape: "box"},
                { id: 6, label: "  Application  ", x: 700, y: 300, fixed: true ,color: "#FB7E81" ,shape: "box"},
                {id: 7, label:"",x: 0,y: 50,fixed: true, shape: "box"},
                {id: 10, label:"",x: 0,y: 200,fixed: true, shape: "box"},
                {id: 11, label:"",x: 350,y: 50,fixed: true, shape: "box"},
                {id: 12, label:"",x: 350,y: 100,fixed: true, shape: "box"},
                {id: 13, label:"",x: 350,y: 150,fixed: true, shape: "box"},
                {id: 14, label:"",x: 350,y: 200,fixed: true, shape: "box"},
                {id: 16, label:"",x: 700,y: 100,fixed: true, shape: "box"},
                {id: 17, label:"",x: 700,y: 150,fixed: true, shape: "box"},
                ];

            var edges =[
                { from: 3, to: 6, arrows: "" ,label:"" },
                { from: 2, to: 5, arrows: "" ,label:"" },
                { from: 1, to: 4, arrows: "" ,label:"" },
                <?php if(in_array("60",$type)){ ?>
                { from: 7, to: 11, arrows: "to" ,label:" 60 " },
                <?php } else { ?>
                { from: 7, to: 11, arrows: "to" ,label:" X " },
                <?php } if(in_array("61",$type)){ ?>
                { from: 12, to: 16, arrows: "to" ,label:" 61 " },
                <?php } else { ?>
                { from: 12, to: 16, arrows: "to" ,label:" X " },
                <?php } if(in_array("62",$type)){ ?>
                { from: 17, to: 13, arrows: "to" ,label:" 62 " },
                <?php } else { ?>
                { from: 17, to: 13, arrows: "to" ,label:" X " },
                <?php } if(in_array("63",$type)){ ?>
                { from: 14, to: 10, arrows: "to" ,label:" 63 " }
                <?php } else { ?>
                { from: 14, to: 10, arrows: "to" ,label:"X" }
                <?php } ?>
                ];
            var container = document.getElementById("mynetwork");
            var data = {
              nodes: nodes,
              edges: edges
            };
            var options = {
                physics: false,
                clickToUse: false,
            };
            var network = new vis.Network(container, data, options);
            </script>
            </tr>           
            <?php } ?>

在其中创建动态id(#mynetwork)并检查它是否不起作用@Shringiraj