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();
};
参考:
很遗憾,我无法测试您的实际情况。因此,如果这不能直接解决您的问题,我深表歉意。
我在尝试从与 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();
};
参考:
很遗憾,我无法测试您的实际情况。因此,如果这不能直接解决您的问题,我深表歉意。