當您單擊節點時，此 javacript 會顯示有關網路中節點的資訊。如果我使用影像作為資訊，它會起作用，但是一旦我嘗試設定影像的寬度和高度，它就不再起作用。可能是因為它必須在 javascript 中完成。有任何想法嗎？
所以在 javascript 里面這有效：
info3: "<b>Example of an image:</b> <br><img src=\"https://www.w3schools.com/images/w3schools_green.jpg\" alt=\"W3Schools.com\"> "
但是如果我想添加寬度和高度，它就不再起作用了。例子：
info3: "<b>Example of an image:</b> <br><img src=\"https://www.w3schools.com/images/w3schools_green.jpg\" alt=\"W3Schools.com\" style="width:50%"> "
這是代碼：
<html>
<head>
<script type="text/javascript" src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script>
<style>
#header-network
{
width: 50vw;
vertical-align: center;
text-align: left;
line-height: 20px;
margin: auto;
}
@media screen and (max-width: 767px) {
#header-network {
width: 90vw;
}
}
#nodeContent {
position: relative;
border: 1px solid lightgray;
width: 50vw;
height: auto;
margin: auto;
padding: 10px;
word-break: break-word;
white-space: pre-wrap;
}
@media screen and (max-width: 767px) {
#nodeContent {
width: 90vw;
}}
#mynetwork {
width: 80vw;
height: 40vh;
margin: auto;
border: 0px solid lightgray;
}
@media screen and (max-width: 767px) {
#mynetwork {
width: 90vw;
}}
</style>
</head>
<body>
<div id="header-network">
<p>header text</p></div>
<div id="mynetwork"></div>
<div id="nodeContent">
<pre id="pre-field">Click on a node to show content here</pre>
</div>
<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet([
{ id: 1,
label: "node 1" ,
info1: "<h3>Title</h3>",
info2: '<p>paragraph text example.paragraph text example. paragraph text example. paragraph text example.paragraph text example.<br><b>Example of a link:</b> <a href=\"http://bing.com\">Bing</a>. </p>',
info3: "<b>Example of an image:</b> <br><img src=\"https://www.w3schools.com/images/w3schools_green.jpg\" alt=\"W3Schools.com\"> "
},
{ id: 2,
label: "node 2" ,
info1: "<h3>Title 2</h3>",
info2: '<p>paragraph text example.paragraph text example. paragraph text example. paragraph text example.paragraph text example.<br><b>Example of a link:</b> <a href=\"http://bing.com\">Bing</a>. </p>',
info3: "<b>Example of an image:</b> <br><img src=\"https://www.w3schools.com/images/w3schools_green.jpg\" alt=\"W3Schools.com\"> "
},
]);
// create an array with edges
var edges = new vis.DataSet([
{ from: 1, to: 2 },
]);
// create a network
var container = document.getElementById("mynetwork");
var data = {
nodes: nodes,
edges: edges,
};
var options =
{
nodes:
{
shape: "circle",
color: "rgba(234, 246, 255, 1)",
margin: 5,
widthConstraint: {
minimum: 75,
},
heightConstraint: {
minimum: 75,
},
},
edges: {
color: {
inherit: 'to',
}},
};
var network = new vis.Network(container, data, options);
network.on("click", function (params) {
if (params.nodes.length > 0) {
var nodeId = params.nodes[0]; // get the data from selected node
document.getElementById("nodeContent").className = "div.nodeContent";
document.getElementById("nodeContent").innerHTML = nodes.get(nodeId).info1 nodes.get(nodeId).info2 nodes.get(nodeId).info3; // show the data in the div
}
});
</script>
</body>
</html>uj5u.com熱心網友回復：
請使用反勾號來增加寬度
info3: `<b>Example of an image:</b> <br><img src=\"https://www.w3schools.com/images/w3schools_green.jpg\" alt=\"W3Schools.com\" style="width:50%">`
或者
添加寬度時使用帶引號的反斜杠
info3: "<b>Example of an image:</b> <br><img src=\"https://www.w3schools.com/images/w3schools_green.jpg\" alt=\"W3Schools.com\" style=\"width:50%\">"
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/362744.html
標籤：javascript 图片 vis.js
上一篇：影像在調整CSS大小時下移