Vis.js JSON 数据到 Google 电子表格范围

Vis.js JSON data to Google Spreadsheets Range

我在尝试从与 id 相关的 Vis.js (here a example!) 节点位置和边缘检索数据到 Google SpreadSheets 范围时遇到了一个小问题。

这是代码(HTML 和 GAS)

let nodeArray = []

data.forEach(element => {
  let obj = {}
  obj.id = element[0]
  obj.label = element[1]
  obj.title = element[2]
  obj.group = element[3]
  obj.x = element[4]
  obj.y = element[5]

  nodeArray.push(obj)
  return element
})
//Logger.log(nodeArray);
return nodeArray;
}

function lineArray() {

  const data = ss.getSheetByName("Conecciones").getRange(2, 1, ss.getLastRow() - 1, 5).getValues();

  let edgArray = []

  data.forEach(element => {
    let obj = {}
    obj.from = element[0]
    obj.label = element[2]
    obj.dashes = element[3]
    obj.to = element[4]
    edgArray.push(obj)
    return element
  })
  //Logger.log(edgArray);
  return edgArray;
}
<html>

<head>
  <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>


</head>

<body>

  <div id="mynetwork"></div>
  <input type="button" id="export_button" onclick="exportNetwork()" value="export">
  <p id="input_output" style="height: 680px;"></p>

  <script type="text/javascript">
    function init() {

      container = document.getElementById('mynetwork');
      exportArea = document.getElementById('input_output');
      network = google.script.run.withSuccessHandler(([nodes, edges]) => new vis.Network(container, {
        nodes: nodes,
        edges: edges
      }, options)).sample();

    };

    function addConnections(elem, index) {
      elem.connections = network.getConnectedNodes(index);
    }

    function exportNetwork() {
      var nodes = objectToArray(network.getPositions());
      nodes.forEach(addConnections);
      var exportValue = JSON.stringify(nodes, undefined, 2);
      exportArea.innerHTML = exportValue;
    }

    function objectToArray(obj) {
      return Object.keys(obj).map(function(key) {
        obj[key].id = key;
        return obj[key];
      });
    }

    init();
  </script>
</body>

</html>

我觉得问题出在这里,在HTML这边

function addConnections(elem, index) {                                                                          
    elem.connections = network.getConnectedNodes(index);
  }

  function exportNetwork() {
    var nodes = objectToArray(network.getPositions());
    nodes.forEach(addConnections);
    var exportValue = JSON.stringify(nodes, undefined, 2);
    exportArea.innerHTML = exportValue;
  }

  function objectToArray(obj) {
    return Object.keys(obj).map(function (key) {
    obj[key].id = key;
    return obj[key];
    });
  }

回顾:

此时,我无法从 google 脚本端读取数据(已 100% 测试,没有 "supposed problem part" 也能正常工作)

预先,非常感谢!

这个修改怎么样?请将此视为几个可能的答案之一。

修改点:

  • 当我看到你的脚本时,我注意到了以下部分。不幸的是,google.script.run returns 没有值。所以我认为在函数exportNetwork()处使用network时,错误发生在network.getPositions()处。我认为这可能是您遇到问题的原因。

    network = google.script.run.withSuccessHandler(([nodes, edges]) => new vis.Network(container, {
      nodes: nodes,
      edges: edges
    }, options)).sample();
    

修改后的脚本:

当你的脚本修改后,下面的修改如何?

从:
function init() {

  container = document.getElementById('mynetwork');
  exportArea = document.getElementById('input_output');
  network = google.script.run.withSuccessHandler(([nodes, edges]) => new vis.Network(container, {
    nodes: nodes,
    edges: edges
  }, options)).sample();

};
到:
let network;  // Added

function init() {
  container = document.getElementById('mynetwork');
  exportArea = document.getElementById('input_output');
  network = google.script.run.withSuccessHandler(([nodes, edges]) => {
      network = new vis.Network(container, {nodes: nodes, edges: edges}, options);  // Modified
  }).sample();
};

参考:

很遗憾,我无法测试您的实际情况。因此,如果这不能直接解决您的问题,我深表歉意。