我对此很陌生,需要一些帮助。
我正在尝试创建组织结构图,但想为不同的连接插入标签。
例如,从 CTO 到“Web devs,sys admin”的行应为 50%。 从 CTO 到“产品开发人员”的线路应为 40% 从 CTO 到“营销团队”的行应为 10%。
Highcharts.chart('container', {
chart: {
height: 600,
inverted: true
},
title: {
text: 'Highcharts Org Chart'
},
accessibility: {
point: {
descriptionFormat: '{add index 1}. {toNode.name}' +
'{#if (ne toNode.name toNode.id)}, {toNode.id}{/if}, ' +
'reports to {fromNode.id}'
}
},
series: [{
type: 'organization',
name: 'Highsoft',
keys: ['from', 'to'],
data: [
['Shareholders', 'Board'],
['Board', 'CEO'],
['CEO', 'CTO'],
['CEO', 'CPO'],
['CEO', 'CSO'],
['CEO', 'HR'],
['CTO', 'Product'],
['CTO', 'Web'],
['CSO', 'Sales'],
['HR', 'Market'],
['CSO', 'Market'],
['HR', 'Market'],
['CTO', 'Market']
],
levels: [{
level: 0,
color: 'silver',
dataLabels: {
color: 'black'
},
height: 25
}, {
level: 1,
color: 'silver',
dataLabels: {
color: 'black'
},
height: 25
}, {
level: 2,
color: '#980104'
}, {
level: 4,
color: '#359154'
}],
nodes: [{
id: 'Shareholders'
}, {
id: 'Board'
}, {
id: 'CEO',
title: 'CEO',
name: 'Atle Sivertsen',
image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2022/06/30081411/portrett-sorthvitt.jpg'
}, {
id: 'HR',
title: 'CFO',
name: 'Anne Jorunn Fjærestad',
color: '#007ad0',
image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2020/03/17131210/Highsoft_04045_.jpg'
}, {
id: 'CTO',
title: 'CTO',
name: 'Christer Vasseng',
image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2020/03/17131120/Highsoft_04074_.jpg'
}, {
id: 'CPO',
title: 'CPO',
name: 'Torstein Hønsi',
image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2020/03/17131213/Highsoft_03998_.jpg'
}, {
id: 'CSO',
title: 'CSO',
name: 'Anita Nesse',
image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2020/03/17131156/Highsoft_03834_.jpg'
}, {
id: 'Product',
name: 'Product developers'
}, {
id: 'Web',
name: 'Web devs, sys admin'
}, {
id: 'Sales',
name: 'Sales team'
}, {
id: 'Market',
name: 'Marketing team',
column: 5
}],
colorByPoint: false,
color: '#007ad0',
dataLabels: {
color: 'white'
},
borderColor: 'white',
nodeWidth: 65
}],
tooltip: {
outside: true
},
exporting: {
allowHTML: true,
sourceWidth: 800,
sourceHeight: 600
}
});
非常感谢对此的任何指导!
我尝试为每个连接添加名称,但这不起作用。
从 Highcharts v11 开始,可以使用
dataLabels.linkFormat
和 dataLabels.linkTextPath
选项设置链接标签。然而,值得注意的是,这些选项目前非常适合非倒置图表。对于倒排图表,正在进行持续改进工作以增强其功能。
演示: https://jsfiddle.net/BlackLabel/cnkf18rg/
同时,作为临时解决方案,您可以在处理倒置时使用 Highcharts.SVG Renderer
演示: https://jsfiddle.net/BlackLabel/7jb9a13g/
API参考: https://api.highcharts.com/highcharts/series.organization.dataLabels.linkTextPath https://api.highcharts.com/highcharts/series.organization.dataLabels.linkFormat https://api.highcharts.com/class-reference/Highcharts.SVGRenderer