如何在组织结构图中添加水平滚动图？
如何在组织结构图中添加水平滚动图？
提问于 2021-09-24 07:51:46
我是高级图表的新手，我正在尝试做一个组织结构图。
我用一些值随机生成了这个集，但是当我在我的机器上运行图表时，图形界面看上去很可怕。这是密码
Highcharts.chart('container', {
chart: {
height: 520,
width: 1080,
inverted: false
},
title: {
text: 'Highcharts Org Chart'
},
series: [{
type: 'organization',
name: 'Highsoft',
keys: ['from', 'to'],
data: [['Prod mainline', 'Pre-Prod mainline'],
['Pre-Prod mainline', 'Test mainline 1'],
['Pre-Prod mainline', 'Test mainline 2'],
['Pre-Prod mainline', 'Dev mainline 3'],
['Test mainline 1', 'Dev mainline 1'],
['Test mainline 2', 'Dev mainline 2'],
['Dev mainline 1', 'TestSandbox004'],
['Dev mainline 1', 'TestSandbox003'],
['Dev mainline 1', 'TestSandbox002'],
['Dev mainline 1', 'TestSandbox001']],
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: 'Dev mainline 1', info: '<br><b>Name</b>: Dev mainline 1<br><b>Description<…inline 1 <br><b>Dev Cycle</b>: Development', layout: 'hanging'}
],
colorByPoint: false,
color: '#007ad0',
dataLabels: {
color: 'white'
},
borderColor: 'white',
nodeWidth: 142,
nodePadding: 100
}],
tooltip: {
outside: true
},
exporting: {
allowHTML: true,
sourceWidth: 800,
sourceHeight: 600
}
});<html>
<head>
<style>
.highcharts-null-point{
fill: yellow;
}
</style>
</head>
<body>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://code.highcharts.com/css/highcharts.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sankey.js"></script>
<script src="https://code.highcharts.com/modules/organization.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<body>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
</body>
</html>在这里，由于空间问题，节点相互重叠。如何克服这个问题？另外，如果我添加水平滚动，那么问题得到了解决？
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-09-24 11:57:49
我能解决我的问题。因此，解决方案如下：https://jsfiddle.net/ritzlucky13/a4t6xLbk/6/
在这里，我只是打电话给一个活动，在那里我在做这个操作
events: {
load() {
// alert('hi')
let chart = this,
numnode = 0,
series = chart.series[0],
newWidth = series.options.nodeWidth * series.nodeColumns[2].length;
for (i in series.nodeColumns) {
numnode += series.nodeColumns[i].length
}
newWidth = series.options.nodeWidth * numnode
chart.update({
chart: {
width: newWidth
}
})
}
}Stack Overflow用户
发布于 2021-09-24 08:34:25
我想这里有几个问题。我假设你想要一个横向的组织结构图。
space
- nodePadding
- 您缺少了3级
- 的定义最好不要为任何级别指定高度(对于0级和1级，设置为25 )
- nodeWidth太宽了，可用的nodeWidth无法关闭
这似乎显示得更明智一些：
Highcharts.chart('container', {
chart: {
height: 400,
width: 1080,
inverted: false
},
title: {
text: 'Highcharts Org Chart'
},
series: [{
type: 'organization',
name: 'Highsoft',
keys: ['from', 'to'],
data: [['Prod mainline', 'Pre-Prod mainline'],
['Pre-Prod mainline', 'Test mainline 1'],
['Pre-Prod mainline', 'Test mainline 2'],
['Pre-Prod mainline', 'Dev mainline 3'],
['Test mainline 1', 'Dev mainline 1'],
['Test mainline 2', 'Dev mainline 2'],
['Dev mainline 1', 'TestSandbox004'],
['Dev mainline 1', 'TestSandbox003'],
['Dev mainline 1', 'TestSandbox002'],
['Dev mainline 1', 'TestSandbox001']],
levels: [{
level: 0,
color: 'silver',
dataLabels: {
color: 'black'
},
}, {
level: 1,
color: 'silver',
dataLabels: {
color: 'black'
},
}, {
level: 2,
color: '#980104'
}, {
level: 3,
color: '#986704'
}, {
level: 4,
color: '#359154'
}],
nodes: [
{id: 'Dev mainline 1', info: '<br><b>Name</b>: Dev mainline 1<br><b>Description<…inline 1 <br><b>Dev Cycle</b>: Development', layout: 'hanging'}
],
colorByPoint: false,
color: '#007ad0',
dataLabels: {
color: 'white'
},
borderColor: 'white',
nodeWidth: 80
}],
tooltip: {
outside: true
},
exporting: {
allowHTML: true,
sourceWidth: 800,
sourceHeight: 600
}
});添加以下CSS以启用水平滚动：
#container {
min-width: 300px;
overflow: scroll !important;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69311436
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号