reactjs - 如何将节点与 highcharts 对齐
问题描述
我正在尝试对齐节点,但我看不到任何选项如何做到这一点,目前我的代码是
Highcharts.chart('container', {
chart: {
type: 'networkgraph',
plotBorderWidth: 1
},
title: {
text: 'Trans-Siberian Railway'
},
subtitle: {
text: 'Barnes-Hut approximation'
},
plotOptions: {
networkgraph: {
layoutAlgorithm: {
enableSimulation: false,
linkLength: 100,
integration: 'verlet',
approximation: 'barnes-hut',
gravitationalConstant: 4,
// Elastic like forces:
attractiveForce: function (d, k) {
return (k - d) / d;
},
/* repulsiveForce: function (d, k) {
return Math.min((k * k) / (d), 100);
} */
}
}
},
series: [{
marker: {
radius: 3,
lineWidth: 1
},
dataLabels: {
enabled: true,
linkFormatter: function () {
return '';
}
},
nodes: [
{
id: 'test',
marker: {
radius: 10
}
},
{
id: 'Moscow',
marker: {
radius: 10
}
}, {
id: 'Beijing',
marker: {
radius: 10
}
},
{
id: 'Brussels',
marker: {
radius: 10
}
},
{
id: 'Bangkok',
marker: {
radius: 10
}
}],
data: [
{ from: 'Bangkok', to: 'Beijing', color: 'blue' },
{ from: 'Moscow', to: 'Beijing', color: 'blue' },
{ from: 'test', to: 'Moscow', color: 'blue' },
{ from: 'Beijing', to: 'Brussels', color: 'blue' },
]
}]
});
代码的结果是:
解决方案
您应该能够使用initialPositions回调在网络图中设置固定位置。为了使其正常工作,您还需要将 maxIterations 设置为一些较小的值,例如 1。
看演示
initialPositions: function() {
var chart = this.series[0].chart,
width = chart.plotWidth,
height = chart.plotHeight;
this.nodes.forEach(function(node, i) {
if(i === 0){
node.plotX = 600;
node.plotY = 100;
}
if(i === 1) {
node.plotX = 350;
node.plotY = 100;
}
if(i === 2){
node.plotX = 200;
node.plotY = 0;
}
if(i === 3) {
node.plotX = 0;
node.plotY = 0;
}
if(i === 4) {
node.plotX = 200;
node.plotY = 200;
}
});
}
API:https ://api.highcharts.com/highcharts/series.networkgraph.layoutAlgorithm.maxIterations
API:https ://api.highcharts.com/highcharts/series.networkgraph.layoutAlgorithm.initialPositions
如果您想让这些点不可拖动,也许更简单的解决方案是呈现常规折线图?
推荐阅读
- vba - LoadPicture 的路径/文件访问错误,似乎基于路径长度
- javascript - 在客户端使用 SQL 参数的名称是否存在安全风险?
- android - 颤振有状态的小部件在热重载和 pushNamed 之后丢失数据
- jquery - AJAX 处理错误
- c# - 通过绝对路径获取文件夹
- c# - 查找 VSIX 命令 VS 2019 的命令 ID
- azure-devops - 流水线等待审批的时候放行代理吗?
- json - REST API 和值对象
- c++ - 线程的意外输出
- css - Chrome meta viewport-fit=cover on an android with display cutouts