javascript - 网络图格式不正确

Question

我需要帮助来绘制网络图。我们有 3 组数据(first、medium、last)，它们以特定的方式相互关联。我尝试借助 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'],

        ]
    }]
});

我希望图表有点大，易于阅读并像图像一样显示

Answer 1

选项 1: 您必须设置每个节点的初始位置:

initialPosition Doc

-增加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']]
    }]

Working example

选项 2:设置链接长度属性

linkLength Doc

plotOptions: {
        networkgraph: {
            keys: ['from', 'to'],
            layoutAlgorithm: {
                enableSimulation: false,
                friction: -0.9,
                linkLength: 150 
            }
        }
    }

Working example