我正在使用组织结构图，并希望将行的开头更改为来自节点的其他位置。 https://jsfiddle.net/markjjordan/oL19jfwv/70/是一个小提琴的例子。
源代码如下：
var nodes = [
{
id: '001.b001.b004',
//column: 1,
//width: 200,
offset: '-30%',
}
,
{
id: '001.b001.b003',
//column: 2,
//width: 200,
offset: '-30%',
}
,
{
id: '001.b001.b002',
//column: 3,
//width: 200,
offset: '-30%',
}
,
{
id: '001.b001.b001.b004',
//column: 4,
//width: 200,
offset: '-15%',
}
,
{
id: '001.b001.b001.b003',
//column: 5,
//width: 200,
offset: '-15%',
}
,
{
id: '001.b001.b001.b002',
//column: 6,
//width: 200,
offset: '-15%',
}
,
{
id: '001.b001.b001.b001',
//column: 7,
//width: 200,
offset: '-15%',
}
,
{
id: '001.b001.b001',
//column: 8,
//width: 200,
offset: '-30%',
}
,
{
id: '001.b001.b005',
//column: 0,
//width: 200,
offset: '-30%',
}
,
{
id: '001.b001',
//column: 9,
//width: 200,
offset: '-45%',
}
,
{
id: '001',
//column: 10,
//width: 200,
offset: '-60%',
color: 'orange'
}
,
{
id: '001.001',
//column: 11,
//width: 200,
offset: '-45%',
}
,
{
id: '001.001.005',
//column: 12,
//width: 200,
offset: '-30%',
}
,
{
id: '001.001.001',
//column: 13,
//width: 200,
offset: '-30%',
}
,
{
id: '001.001.001.001',
//width: 200,
//column: 14,
offset: '-15%',
}
,
{
id: '001.001.001.002',
//width: 200,
//column: 15,
offset: '-15%',
}
,
{
id: '001.001.001.003',
//width: 200,
//column: 16,
offset: '-15%',
}
,
{
id: '001.001.001.004',
//width: 200,
//column: 17,
offset: '-15%',
}
,
{
id: '001.001.002',
//width: 200,
//column: 18,
offset: '-30%',
}
,
{
id: '001.001.003',
//width: 200,
//column: 19,
offset: '-30%',
}
,
{
id: '001.001.004',
//width: 200,
//column: 20,
offset: '-30%',
}
]
;
var counter = 0;
nodes.forEach(function(element) {
//console.log(element);
element.width = 200;
element.column = counter++;
});
Highcharts.chart('container', {
chart: {
height: 2000,
//width: 800,
inverted: true
},
title: {
text: 'Highcharts Org Chart'
},
series: [{
type: 'organization',
name: 'Highsoft',
keys: ['from', 'to'],
nodePadding: 5,
hangingIndent: 10,
data: [
['001', '001.001'],
['001.001', '001.001.005'],
['001.001', '001.001.001'],
['001.001.001', '001.001.001.001'],
['001.001.001', '001.001.001.002'],
['001.001.001', '001.001.001.003'],
['001.001.001', '001.001.001.004'],
['001.001', '001.001.002'],
['001.001', '001.001.003'],
['001.001', '001.001.004'],
['001', '001.b001'],
['001.b001', '001.b001.b001'],
['001.b001.b001', '001.b001.b001.b001'],
['001.b001.b001', '001.b001.b001.b002'],
['001.b001.b001', '001.b001.b001.b003'],
['001.b001.b001', '001.b001.b001.b004'],
['001.b001', '001.b001.b002'],
['001.b001', '001.b001.b003'],
['001.b001', '001.b001.b004'],
['001.b001', '001.b001.b005'],
],
nodes: nodes,
colorByPoint: false,
color: '#007ad0',
dataLabels: {
color: 'white'
},
borderColor: 'white',
nodeWidth: 65
}],
tooltip: {
outside: true
},
exporting: {
allowHTML: true,
sourceWidth: 800,
sourceHeight: 600
}
});
橙色节点上方的所有蓝色节点在HighCharts的data参数中都有一个橙色节点的“ from”引用和一个蓝色节点的“ to”引用……我需要这样做，因为我想要橙色节点之上的所有内容有多个父母。
就行而言，我想要的是使来自或到达蓝色节点的行位于左侧，而不是jsfiddle中的顶部或底部。
答案 0 :(得分：0)
您可以简单地通过包装Highcharts.seriesTypes.organization.prototype.translateLink方法并更改链接路径的创建方式来实现。我为您准备了一个示例，其中添加了新的layout = "custom"。
代码：
(function(H) {
H.seriesTypes.organization.prototype.translateLink = function(point) {
var fromNode = point.fromNode,
toNode = point.toNode,
series = point.series,
layout = toNode.layout,
crisp = Math.round(this.options.linkLineWidth) % 2 / 2,
x1 = Math.floor(
fromNode.shapeArgs.x + fromNode.shapeArgs.width
) + crisp,
y1 = Math.floor(
fromNode.shapeArgs.y + fromNode.shapeArgs.height / 2
) + crisp,
x2 = Math.floor(toNode.shapeArgs.x) + crisp,
y2 = Math.floor(
toNode.shapeArgs.y + toNode.shapeArgs.height / 2
) + crisp,
xMiddle,
hangingIndent = this.options.hangingIndent,
toOffset = toNode.options.offset,
percentOffset = /%$/.test(toOffset) && parseInt(toOffset, 10),
inverted = this.chart.inverted,
isEven = fromNode.linksFrom.length % 2 === 0,
lastToNodeId =
fromNode.linksFrom[fromNode.linksFrom.length - 1].to,
linkBranchOffset = H.defined(fromNode.linkBranchOffset) ?
fromNode.linkBranchOffset : undefined,
prevOffset = 'prevLinkBranchOffset' + fromNode.column,
middleNode1,
middleNode2,
directionIndicator,
linkDirection,
linkCorrection,
branchOffset,
d;
if (inverted) {
x1 -= fromNode.shapeArgs.width;
x2 += toNode.shapeArgs.width;
}
xMiddle = Math.floor(
x2 +
(inverted ? 1 : -1) *
(this.colDistance - this.nodeWidth) / 2
) + crisp;
// Put the link on the side of the node when an offset is given. HR
// node in the main demo.
if (
percentOffset &&
(percentOffset >= 50 || percentOffset <= -50)
) {
xMiddle = x2 = Math.floor(
x2 + (inverted ? -0.5 : 0.5) * toNode.shapeArgs.width
) + crisp;
y2 = toNode.shapeArgs.y;
if (percentOffset > 0) {
y2 += toNode.shapeArgs.height;
}
}
if (toNode.hangsFrom === fromNode) {
if (this.chart.inverted) {
y1 = Math.floor(
fromNode.shapeArgs.y +
fromNode.shapeArgs.height -
hangingIndent / 2
) + crisp;
y2 = toNode.shapeArgs.y + toNode.shapeArgs.height;
} else {
y1 = Math.floor(
fromNode.shapeArgs.y +
hangingIndent / 2
) + crisp;
}
xMiddle = x2 = Math.floor(
toNode.shapeArgs.x + toNode.shapeArgs.width / 2
) + crisp;
}
if (layout === 'custom') {
d = this.curvedPath([
[x1, y1],
[xMiddle - toNode.nodeHeight / 2 - 10, y1],
[xMiddle - toNode.nodeHeight / 2 - 10, y2]
], this.options.linkRadius);
} else {
d = this.curvedPath([
[x1, y1],
[xMiddle, y1],
[xMiddle, y2],
[x2, y2]
], this.options.linkRadius);
}
point.plotY = 1;
point.shapeType = 'path';
point.shapeArgs = {
d: d
};
}
})(Highcharts)
演示 ：（在屏幕宽度> 800px上打开）