0

Highcharts.chart('container', { chart: { type: 'networkgraph', ...

我在添加或修改节点时使用网络图，现有节点位置变化很大。如果我想要更改而不更改位置，我应该怎么做。

代码：

 Highcharts.chart('container', {
      chart: {
        type: 'networkgraph',
        backgroundColor: '#000000', 
        animation: 'false',
        height: '500px',        
        //marginRight: '100px',
        events: {
          render() {
            let chart = this;
            //console.log(chart)
            //render custom back button
            chart.label = chart.renderer.label('Back', chart.plotWidth - 100, 50)
              .css({
                color: '#FFFFFF'
              })
              .attr({
                fill: 'rgba(0, 0, 0, 0.75)',
                padding: 8,
                r: 5,
                zIndex: 6,
              })
              .add()
            //show it after initial load
            chart.label.hide()

            if (chart.forRender) {

              chart.series[0].points.forEach((p, i) => {

                p.graphic.element.onclick = function () {
                  chart.series[0].update({                    
                    //data: drilldownData[i][0].data,
                    //nodes: drilldownData[i][0].nodes
                  })
                  chart.forRender = false
                  chart.label.show();
                }
              })
            }
            chart.label.element.onclick = function () {
              chart.forRender = true
              chart.label.hide();
              chart.series[0].update({
                data: this.initialSeries.data,
                nodes: this.initialSeries.nodes
              })
            }
          }
        }
      },
      title: {
        text: '',
        color: 'white'
    },
    plotOptions: {
      networkgraph: {
          layoutAlgorithm: {
              linkLength: 30, // in pixels ,
              enableSimulation: false ,             
              initialPositions: 'square',
             // integration:"euler",
              //attractiveForce: function (d, k) { return ( d -k); },
            //  repulsiveForce: function(){ return 1.5}
          },
          draggable: false,
          dataLabels:{
            enabled: true,
            padding:12,
            style:{
              color:'#cbb6dd',
              fontWeight: 'bold',
              textOutline: '0px contrast'
            }
          }
      }
  },
      series: [this.initialSeries]
    }, function (chart) {
      chart.forRender = true
    });

json:

{
      "data": [
    { "from": "OLO", "to": "CS003", "color": "#ffdd03" },
        { "from": "OLO", "to": "RGA", "color": "#ffffff" },
        { "from": "OLO", "to": "RGM", "color": "#ff0703" },
    { "from": "OLO", "to": "BDT", "color": "#ffffff" },
    { "from": "OLO", "to": "CW", "color": "#ffdd03" },
        { "from": "CS902", "to": "QTH", "color": "#ffffff" },
        { "from": "RGA", "to": "QTH", "color": "#ffdd03" },
        { "from": "RGA", "to": "CLC", "color": "#ff0703" },
    { "from": "RGM", "to": "SYE", "color": "#ffffff" },
        { "from": "SYE", "to": "CLC", "color": "#ff0703" },
        { "from": "BDT", "to": "CLC", "color": "#ffdd03" },
        { "from": "EHR", "to": "LVC", "color": "#ffffff" },
        { "from": "EHR", "to": "CLC", "color": "#ff0703" },
        { "from": "EHR", "to": "GWW", "color": "#ffffff" },
        { "from": "EHR", "to": "GWT1", "color": "#ff0703" },
        { "from": "EHR", "to": "TPZ", "color": "#ffdd03" },
        { "from": "EHR", "to": "NGC", "color": "#ffdd03" },
        { "from": "EHR", "to": "CS004", "color": "#ffffff" },
        { "from": "GWW", "to": "L/T1", "color": "#ff0703" },
        { "from": "CS004", "to": "MRT1", "color": "#ffdd03" }
      ],
      "nodes": [
      {
        "id": "999 TXT",
        "marker": {
        "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "ASU",
        "marker": {
        "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "VRU",
        "marker": {
          "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "Internet",
        "marker": {
          "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "Dail IT",
        "marker": {
          "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "VMP",
        "marker": {
          "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "CS05",
        "marker": {
          "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "MSP",
        "marker": {
          "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "VO",
        "marker": {
          "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "OR",
        "marker": {
          "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "O2",
        "marker": {
        "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "Mobile",
        "marker": {
          "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "CW",
        "marker": {
          "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "TW",
        "marker": {
          "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "Resilient Network",
        "marker": {
          "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "Jet",
        "marker": {
          "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "ONLY X",
        "marker": {
          "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "TOAD",
        "marker": {
          "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "VUL",
        "marker": {
          "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "CRAWLEY",
        "marker": {
          "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "BT",
        "marker": {
          "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "Others",
        "marker": {
          "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "VOIP ITP",
        "marker": {
          "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "Old Exchanges",
        "marker": {
          "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "SDIN",
        "marker": {
          "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "PH/1",
        "marker": {
          "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "OLO",
        "marker": {
          "symbol": "url(assets/images/server.png)"
        }
      },
      {
        "id": "CS003",
        "marker": {
          "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "RGA",
        "marker": {
          "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "RGM",
        "marker": {
          "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "BDT",
        "marker": {
          "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "CS902",
        "marker": {
          "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "QTH",
        "marker": {
          "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "CLC",
        "marker": {
          "symbol": "url(assets/images/customer-service.png)"
        }
      },
      {
        "id": "SYE",
        "marker": {
          "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "EHR",
        "marker": {
          "symbol": "url(assets/images/teamwork.png)"
        }
      },
      {
        "id": "LVC",
        "marker": {
          "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "GWW",
        "marker": {
          "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "GWT1",
        "marker": {
          "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "TPZ",
        "marker": {
          "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "NGC",
        "marker": {
          "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "L/T1",
        "marker": {
          "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "CS004",
        "marker": {
          "symbol": "url(assets/images/computer.png)"
        }
      },
      {
        "id": "MRT1",
        "marker": {
          "symbol": "url(assets/images/computer.png)"
        }
      }   
      ],
      "name": "Main Series",
        "dataLabels": {
            "draggable": "false",
            "enabled": "true"
        },
      "link": {
        "width": 3
      }
    }

在此处输入图像描述

在此处输入图像描述

那么请您告诉我我们如何实现这一目标。

4

1 回答 1

0

您可以将maxIterations属性归零并为事件中的新点定义自定义位置redraw：

chart: {
    ...,
    events: {
        load: function() {
            var chart = this;

            setTimeout(function() {
                chart.series[0].addPoint(['G', 'Z'], true);
            }, 2000);
        },
        redraw: function() {
            var newNode = this.series[0].nodes[7];

            newNode.plotX = 100;
            newNode.plotY = 100;
        }
    }
}

现场演示： https ://jsfiddle.net/BlackLabel/t742a9kh/

API 参考：

https://api.highcharts.com/highcharts/series.networkgraph.layoutAlgorithm.maxIterations

https://api.highcharts.com/highcharts/chart.events.redraw

于 2019-09-13T12:52:32.623 回答