[英]HighChart.js : How to group nodes in organization chart
I want to make a family tree using Highchart.js organization chart. 我想使用Highchart.js组织结构图制作家谱。 For a married couple, I want to display either: 对于一对已婚夫妇,我想显示以下任何一个:
(1) the nodes connected to each other (as seen in the below image between nodes at the top) or (1)相互连接的节点(如下面的图所示,在顶部的节点之间)
(2) group them together. (2)将它们组合在一起。
Is there a function in Highchart.js that I can achieve this? Highchart.js中是否有一个我可以实现的功能?
I have tried to use some functions as written in https://api.highcharts.com/highcharts/series.organization but haven't found what I needed. 我尝试使用https://api.highcharts.com/highcharts/series.organization中编写的某些功能,但未找到所需的功能。
https://jsfiddle.net/k4ped9fj/ 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>
Unfortunately, this feature is not supported. 不幸的是,不支持此功能。 However, you can achieve it using Highcharts.SVGRenderer.path
and plotting custom link between two nodes. 但是,您可以使用Highcharts.SVGRenderer.path
并在两个节点之间绘制自定义链接来实现。 Check the code and demo posted below. 检查下面发布的代码和演示。
Code: 码:
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;
}
}
}
Demo: 演示:
API reference: API参考:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.