HighChart.js：如何在組織結構圖中對節點進行分組

Question

我想使用Highchart.js組織結構圖制作家譜。 對於一對已婚夫婦，我想顯示以下任何一個：

（1）相互連接的節點（如下面的圖所示，在頂部的節點之間）

（2）將它們組合在一起。

Highchart.js中是否有一個我可以實現的功能？

我嘗試使用https://api.highcharts.com/highcharts/series.organization中編寫的某些功能，但未找到所需的功能。

https://jsfiddle.net/k4ped9fj/

<script>
    Highcharts.chart('container', {

      chart: {
        height: 400,
        inverted: true
      },
      title: {
        text: ""
      },
      series: [{
        type: 'organization',
        name: 'Family Tree',
        keys: ['from', 'to'],

        data: [
        ['1','2'],['3','1'],['3','4'],['3','8'],['3','16'],['3','22'],['16','10'],['16','25']
        ],
        levels: [{
          color: '#008fd5',
          dataLabels: {
            color: 'white'
          },
          height: 25
        }],
        linkColor: "#ccc",
        linkLineWidth: 1,
        linkRadius: 0,

        nodes: [

                { name: "Sarah Collin", description: "7/5/1990", tags: ["T1and4"], id: "1", pid: 3, FirstName: "Sarah", LastName: "Collin", Birthdate: "7/5/1990", Alive: "1", SpouseID: "4", image: "photo.png" },
                { name: "Sofia Collin", description: "1/1/2017", id: "2", pid: 1, FirstName: "Sofia", LastName: "Collin", Birthdate: "1/1/2017", Alive: "1", image: "photo.png" },
                { name: "Richard Dolson", description: "7/7/1953-1/1/2016", id: "3", FirstName: "Richard", LastName: "Dolson", Birthdate: "7/7/1953", Alive: "0", DeathDate: "1/1/2016", image: "photo.png" },
                { name: "Adam Collin", description: "2/1/1990", tags: ["T1and4"], id: "4", pid: 3, FirstName: "Adam", LastName: "Collin", Birthdate: "2/1/1990", Alive: "0", Allergy: "Medicine", SpouseID: "1", image: "photo.png" },
                { name: "Jennifer Dolson", description: "1/2/1996", id: "8", pid: 3, FirstName: "Jennifer", LastName: "Dolson", Birthdate: "1/2/1996", Alive: "1", image: "photo.png" },
                { name: "Elias Wittek", description: "", id: "10", pid: 16, FirstName: "Elias", LastName: "Wittek", Alive: "1", image: "photo.png" },
                { name: "David Wittek", description: "2/1/1999", tags: ["T16and26"], id: "16", pid: 3, FirstName: "David", LastName: "Wittek", Birthdate: "2/1/1999", Alive: "1", SpouseID: "26", image: "photo.png" },
                { name: "Jeff Dolson", description: "2/1/2000", id: "22", pid: 3, FirstName: "Jeff", LastName: "Dolson", Birthdate: "2/1/2000", Alive: "0", image: "photo.png",layout:'hanging' , offset: '50%' },
                { name: "Will Wittek", description: "", id: "25", pid: 16, FirstName: "Will", LastName: "Wittek", Alive: "1", image: "photo.png" },
                { name: "Tracy Dolson", description: "2/1/2000", tags: ["T16and26"], id: "26", FirstName: "Tracy", LastName: "Dolson", Birthdate: "2/1/2000", Alive: "1", SpouseID: "16", image: "photo.png" }
        ],

        colorByPoint: false,
        color: '#007ad0',
        dataLabels: {
          color: 'white'
        },
        shadow: {
            color: '#ccc',
            width: 15,
            offsetX: 0,
            offsetY: 0
        },
        hangingIndent: 10,
        borderColor: '#ccc',
        nodePadding: 5,
        nodeWidth: 80
      }],
      credits: {
        enabled: false
    },

      tooltip: {
        outside: true,
        formatter: function () {
            return '<b>' + this.point.name.toUpperCase() + '</b><br/>' +
                '<span>' + this.point.description.toUpperCase() + '</span><br/>' 
        }
      },
      exporting: {
        allowHTML: true,
        sourceWidth: 800,
        sourceHeight: 400
      }

    });
</script>

Answer 1

不幸的是，不支持此功能。 但是，您可以使用Highcharts.SVGRenderer.path並在兩個節點之間繪制自定義鏈接來實現。 檢查下面發布的代碼和演示。

碼：

  chart: {
    height: 400,
    inverted: true,
    events: {
        render: function() {
        var chart = this,
            node1,
          node2,
          graphic;

        if (chart.customLink) {
            chart.customLink.destroy();
        }

        chart.series[0].nodes.forEach(function (node) {
          if (node.id === "3") {
                        node1 = node;
          } else if (node.id === "31") {
            node2 = node;
          }
        });

        graphic = chart.renderer.path([
            'M',
          node1.shapeArgs.y + node1.shapeArgs.height / 2,
          chart.plotHeight - node1.shapeArgs.x - node1.shapeArgs.width / 2 + 10,
          'L',
          node2.shapeArgs.y + node2.shapeArgs.height / 2,
          chart.plotHeight - node2.shapeArgs.x - node1.shapeArgs.width / 2 + 10,
          'Z'
        ]).attr({
          'stroke-width': 1,
          stroke: '#ccc'
        }).add();

        chart.customLink = graphic;
      }
    }
  }

演示：

• https://jsfiddle.net/BlackLabel/tjr5gue2/1/

API參考：

• https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path