如何使节点与图表高度匹配 [英] 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' },




    ]
}]

});

代码的结果是:

并且仍然无法达到预期的效果

and its still not alignment the wanted results is

推荐答案

您应该能够通过使用 initialPositions 回调在网络图图表中设置固定位置.为了使其正常工作，还需要将maxIterations设置为一个较小的值，例如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.

请参见演示

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?

演示: https://jsfiddle.net/BlackLabel/06Lkgwbz/

这篇关于如何使节点与图表高度匹配的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！