以下是一个使用
Highcharts实现垂直组织架构图的示例代码：
HTML代码：
```html
<div id="container"></div>
```
JavaScript代码：
```javascript
Highcharts.chart('container', {
chart: {
height: 600,
inverted: true
},
title: {
text: '垂直组织架构图'
},
series: [{
type: 'organization',
name: '公司
结构',
keys: ['from', 'to'],
data: [
['CEO', 'CTO'],
['CEO', 'CFO'],
['CEO', 'COO'],
['CTO', '技术部'],
['技术部', '前端开发'],
['技术部', '后端开发'],
['技术部', '测试部'],
['CFO', '财务部'],
['COO', '人力资源部'],
['COO', '市场部'],
['COO', '销售部']
],
levels: [{
level: 0,
color: '#0066cc',
dataLabels: {
color: 'white'
},
height: 25
}, {
level: 1,
color: '#0099ff',
dataLabels: {
color: 'white'
},
height: 25
}, {
level: 2,
color: '#33adff',
dataLabels: {
color: 'white'
},
height: 25
}],
nodes: [{
id: 'CEO',
title: '首席执行官',
name: 'John Smith',
image: 'https://www.
highcharts.com/samples/graphics/sun.png'
}, {
id: 'CTO',
title: '首席技术官',
name: 'David Johnson',
image: 'https://www.
highcharts.com/samples/graphics/moon.png'
}, {
id: 'CFO',
title: '首席财务官',
name: 'Lisa Williams',
image: 'https://www.
highcharts.com/samples/graphics/earth.png'
}, {
id: 'COO',
title: '首席运营官',
name: 'Kevin Brown',
image: 'https://www.
highcharts.com/samples/graphics/venus.png'
}, {
id: '技术部',
title: '技术部门',
name: 'Tech Department',
image: 'https://www.
highcharts.com/samples/graphics/asteroid.png'
}, {
id: '前端开发',
title: '前端开发',
name: 'Front-end Development',
image: 'https://www.
highcharts.com/samples/graphics/comet.png'
}, {
id: '后端开发',
title: '后端开发',
name: 'Back-end Development',
image: 'https://www.
highcharts.com/samples/graphics/galaxy.png'
}, {
id: '测试部',
title: '测试部门',
name: 'Testing Department',
image: 'https://www.
highcharts.com/samples/graphics/meteor.png'
}, {
id: '财务部',
title: '财务部门',
name: 'Finance Department',
image: 'https://www.
highcharts.com/samples/graphics/saturn.png'
}, {
id: '人力资源部',
title: '人力资源部门',
name: 'Human Resources Department',
image: 'https://www.
highcharts.com/samples/graphics/neptune.png'
}, {
id: '市场部',
title: '市场部门',
name: 'Marketing Department',
image: 'https://www.
highcharts.com/samples/graphics/uranus.png'
}, {
id: '销售部',
title: '销售部门',
name: 'Sales Department',
image: 'https://www.
highcharts.com/samples/graphics/pluto.png'
}],
tooltip: {
outside: true
},
colorByPoint: false,
color: '#0077cc',
borderColor: '#0077cc',
nodeWidth: 200
}]
});
```
这段代码创建了一个
Highcharts图表，并使用
JSON格式的数据源定义了垂直组织架构图。通过调整levels、nodes和data属性，可以自定义
图表的外观和内容。
249
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
