我在Highcharts中使用网络图。
如图所示，使用javascript的要求是“节点之间应该存在互连”。
但是我只能实现如下所示的基本结构：
function showConnection(sample,prefix) {
const new_array = [];
for (let i = 1; i <= 10; i++) {
new_array.push([sample,prefix + i]);
}
return new_array;
}
有人可以检查如何实施吗？
您也可以在数组中推送所需的连接，这些连接将在图中显示为连接。
示例：
new_array.push([prefix+10,prefix + 1]);
new_array.push([prefix+5,prefix + 9]);
new_array.push([prefix+10,prefix + 9]);
/* This below code snippet showConnection() is for generating nodes,How to modify this to implement interconnection between nodes??? */
function showConnection(sample,prefix) {
const new_array = [];
for (let i = 1; i <= 10; i++) {
new_array.push([sample,prefix + i]);
}
new_array.push([prefix+10,prefix + 1]);
new_array.push([prefix+5,prefix + 9]);
new_array.push([prefix+10,prefix + 9]);
return new_array;
}
Highcharts.addEvent(
Highcharts.Series,'afterSetOptions',function (e) {
var colors = Highcharts.getOptions().colors,i = 0,nodes = {};
if (
this instanceof Highcharts.seriesTypes.networkgraph &&
e.options.id === 'lang-tree'
) {
e.options.data.forEach(function (link) {
if (link[0] === 'A') {
nodes['A'] = {
id: 'A',marker: {
radius: 20
}
};
nodes[link[1]] = {
id: link[1],marker: {
radius: 10
},color: colors[i++]
};
} else if (nodes[link[0]] && nodes[link[0]].color) {
nodes[link[1]] = {
id: link[1],color: nodes[link[0]].color
};
}
});
e.options.nodes = Object.keys(nodes).map(function (id) {
return nodes[id];
});
}
}
);
Highcharts.chart('container',{
chart: {
type: 'networkgraph',height: '100%',zoomType: 'xy'
},title: {
text: 'The Indo-European Language Tree'
},subtitle: {
text: 'A Force-Directed Network Graph in Highcharts'
},plotOptions: {
networkgraph: {
keys: ['from','to'],layoutAlgorithm: {
enableSimulation: true,friction: -0.9
}
}
},series: [{
dataLabels: {
enabled: true,linkFormat: ''
},id: 'lang-tree',data: showConnection('Item','SubItem')
}]
});#container {
min-width: 320px;
max-width: 800px;
margin: 0 auto;
}<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/networkgraph.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>