How to aligment nodes with highcharts

问题

I am trying to alignment nodes, But I cant see any options how to do it, Currently my code is

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' },




    ]
}]

});

the result of code is:

and its still not alignment the wanted results is

回答1:

You should be able to set fixed positions in the networkgraph chart by using the initialPositions callback. To work it well you need also to set maxIterations to some small value, like 1.

See demo

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

If you want to have those points not draggable, maybe an easier solution will be to render regular line chart?

Demo: https://jsfiddle.net/BlackLabel/06Lkgwbz/

来源：https://stackoverflow.com/questions/59354126/how-to-aligment-nodes-with-highcharts

标签

reactjs

Highcharts

react-highcharts