javascript - 网络图未正确格式化
问题描述
我需要帮助来绘制网络图。我们有 3 组数据(第一、中、最后),它们以特定方式相互连接。我试图在 highcharts 基本图的帮助下绘制它,但它看起来太小了,我无法增加宽度,即使尝试在代码中添加 width = 200% 也是如此。
我尝试了代码https://jsfiddle.net/maheshp8309/7tpr23eq/7/ 还没有运气。它看起来那么小。
// Add the nodes option through an event call. We want to start with the parent
// item and apply separate colors to each child element, then the same color to
// grandchildren.
Highcharts.addEvent(
Highcharts.seriesTypes.networkgraph,
'afterSetOptions',
function (e) {
var colors = Highcharts.getOptions().colors,
i = 0,
nodes = {};
e.options.data.forEach(function (link) {
if (link[0] === 'last01') {
nodes['last01'] = {
id: 'last01',
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%',
width: '100%'
},
title: {
text: 'Main diag'
},
subtitle: {
text: 'Router connection'
},
plotOptions: {
networkgraph: {
keys: ['from', 'to'],
layoutAlgorithm: {
enableSimulation: false,
friction: -0.9
}
}
},
series: [{
dataLabels: {
enabled: true,
linkFormat: ''
},
data: [
['last01','last02'],
['last01','medium201'],
['last01','medium202'],
['last01','medium203'],
['last01','medium204'],
['last01','medium205'],
['last01','medium206'],
['last01','medium207'],
['last01','medium208'],
['last01','medium209'],
['last01','medium210'],
['last01','medium211'],
['last01','medium212'],
['last01','medium213'],
['last01','medium214'],
['last01','medium215'],
['last01','medium216'],
['last02','last01'],
['last02','medium201'],
['last02','medium202'],
['last02','medium203'],
['last02','medium204'],
['last02','medium205'],
['last02','medium206'],
['last02','medium207'],
['last02','medium208'],
['last02','medium209'],
['last02','medium210'],
['last02','medium211'],
['last02','medium212'],
['last02','medium213'],
['last02','medium214'],
['last02','medium215'],
['last02','medium216'],
['medium201','last01'],
['medium201','last02'],
['medium201','medium101'],
['medium201','medium102'],
['medium201','medium103'],
['medium201','medium104'],
['medium202','last01'],
['medium202','last02'],
['medium202','medium101'],
['medium202','medium102'],
['medium202','medium103'],
['medium202','medium104'],
['medium203','last01'],
['medium203','last02'],
['medium203','medium101'],
['medium203','medium102'],
['medium203','medium103'],
['medium203','medium104'],
['medium204','last01'],
['medium204','last02'],
['medium204','medium101'],
['medium204','medium102'],
['medium204','medium103'],
['medium204','medium104'],
['medium205','last01'],
['medium205','last02'],
['medium205','medium101'],
['medium205','medium102'],
['medium205','medium103'],
['medium205','medium104'],
['medium206','last01'],
['medium206','last02'],
['medium206','medium101'],
['medium206','medium102'],
['medium206','medium103'],
['medium206','medium104'],
['medium207','last01'],
['medium207','last02'],
['medium207','medium101'],
['medium207','medium102'],
['medium207','medium103'],
['medium207','medium104'],
['medium208','last01'],
['medium208','last02'],
['medium208','medium101'],
['medium208','medium102'],
['medium208','medium103'],
['medium208','medium104'],
['medium209','last01'],
['medium209','last02'],
['medium209','medium101'],
['medium209','medium102'],
['medium209','medium103'],
['medium209','medium104'],
['medium210','last01'],
['medium210','last02'],
['medium210','medium101'],
['medium210','medium102'],
['medium210','medium103'],
['medium210','medium104'],
['medium211','last01'],
['medium211','last02'],
['medium211','medium101'],
['medium211','medium102'],
['medium211','medium103'],
['medium211','medium104'],
['medium212','last01'],
['medium212','last02'],
['medium212','medium101'],
['medium212','medium102'],
['medium212','medium103'],
['medium212','medium104'],
['medium213','last01'],
['medium213','last02'],
['medium213','medium101'],
['medium213','medium102'],
['medium213','medium103'],
['medium213','medium104'],
['medium214','last01'],
['medium214','last02'],
['medium214','medium101'],
['medium214','medium102'],
['medium214','medium103'],
['medium214','medium104'],
['medium215','last01'],
['medium215','last02'],
['medium215','medium101'],
['medium215','medium102'],
['medium215','medium103'],
['medium215','medium104'],
['medium216','last01'],
['medium216','last02'],
['medium216','medium101'],
['medium216','medium102'],
['medium216','medium103'],
['medium216','medium104'],
['medium101','medium201'],
['medium101','medium202'],
['medium101','medium203'],
['medium101','medium204'],
['medium101','medium205'],
['medium101','medium206'],
['medium101','medium207'],
['medium101','medium208'],
['medium101','medium209'],
['medium101','medium210'],
['medium101','medium211'],
['medium101','medium212'],
['medium101','medium213'],
['medium101','medium214'],
['medium101','medium215'],
['medium101','medium216'],
['medium101','first104'],
['medium101','first103'],
['medium101','first102'],
['medium101','first101'],
['medium102','medium201'],
['medium102','medium202'],
['medium102','medium203'],
['medium102','medium204'],
['medium102','medium205'],
['medium102','medium206'],
['medium102','medium207'],
['medium102','medium208'],
['medium102','medium209'],
['medium102','medium210'],
['medium102','medium211'],
['medium102','medium212'],
['medium102','medium213'],
['medium102','medium214'],
['medium102','medium215'],
['medium102','medium216'],
['medium102','first104'],
['medium102','first103'],
['medium102','first102'],
['medium102','first101'],
['medium103','medium201'],
['medium103','medium202'],
['medium103','medium203'],
['medium103','medium204'],
['medium103','medium205'],
['medium103','medium206'],
['medium103','medium207'],
['medium103','medium208'],
['medium103','medium209'],
['medium103','medium210'],
['medium103','medium211'],
['medium103','medium212'],
['medium103','medium213'],
['medium103','medium214'],
['medium103','medium215'],
['medium103','medium216'],
['medium103','first104'],
['medium103','first103'],
['medium103','first102'],
['medium103','first101'],
['medium104','medium201'],
['medium104','medium202'],
['medium104','medium203'],
['medium104','medium204'],
['medium104','medium205'],
['medium104','medium206'],
['medium104','medium207'],
['medium104','medium208'],
['medium104','medium209'],
['medium104','medium210'],
['medium104','medium211'],
['medium104','medium212'],
['medium104','medium213'],
['medium104','medium214'],
['medium104','medium215'],
['medium104','medium216'],
['medium104','first104'],
['medium104','first103'],
['medium104','first102'],
['medium104','first101'],
['first101','medium104'],
['first101','medium103'],
['first101','medium102'],
['first101','medium101'],
['first102','medium104'],
['first102','medium103'],
['first102','medium102'],
['first102','medium101'],
['first103','medium104'],
['first103','medium103'],
['first103','medium102'],
['first103','medium101'],
['first104','medium104'],
['first104','medium103'],
['first104','medium102'],
['first104','medium101'],
]
}]
});
我希望图形有点大,易于阅读并像图像一样显示
解决方案
选项 1: 您必须设置每个节点的初始位置:
-增加 plotX 将节点向右移动
- 增加 plotY 将节点移动到底部
series: [{
dataLabels: {
enabled: true,
linkFormat: ''
},
layoutAlgorithm: {
initialPositions: function () {
this.nodes.forEach(function (node) {
if(node.id == "medium208"){
node.plotX = 200;
node.plotY = 100;
}
if(node.id == "last01"){
node.plotX = 100;
node.plotY = 100;
}
});
}
},
data: [['last01','medium208']]
}]
选项 2:设置链接长度属性
plotOptions: {
networkgraph: {
keys: ['from', 'to'],
layoutAlgorithm: {
enableSimulation: false,
friction: -0.9,
linkLength: 150
}
}
}
推荐阅读
- django - 在 django 中上传文件时处理文件
- xpages - Notes XPages typeahead 返回一些带有方括号的名称
- powershell - 如何使用当前日期(yyyy-mm-dd)作为带有 Get_Content 命令的 Select-String -Pattern 的一部分
- c# - 对依赖于 httpclient 响应的服务类进行单元测试
- c++ - 尝试使用 libgit2 快进时“无法在符号引用上设置 OID”
- airflow - 增加气流中特定 DAG 的超时
- sqlite - 为什么迁移生成器要创建临时表?
- javascript - 从 Chrome Dev 扩展访问目标页面中的 JavaScript 变量
- java - Java 返回 YAML mime 类型 null
- github - 我存储在 Ubuntu 中的作曲家全局配置信息在哪里