在高图甘特图中隐藏父任务总长度

Question

我正在通过父任务排序我的任务。每个用户都有自己的假期。因为假期可以设置为中间有一些时间，所以我想隐藏父母的任务总长度，这样就不能反映休假的实际情况。

工作相互依赖:https://codepen.io/Codepenmitsu/pen/QWVeqay

我绘制图表的数据:

let today = new Date(),
day = 1000 * 60 * 60 * 24;
// Set to 00:00:00:000 today
today.setUTCHours(0);
today.setUTCMinutes(0);
today.setUTCSeconds(0);
today.setUTCMilliseconds(0);
let data = [
{
"name": "Guillaume",
"data": [
{
"name": "Guillaume",
"id": "Guillaume",
"owner": "Guillaume"
},
{
"name": "Congés Guillaume",
"id": 1,
"parent": "Guillaume",
"start": 1678838400000,
"end": 1679097600000,
"owner": "Guillaume"
},
{
"name": "Congés G",
"id": 2,
"parent": "Guillaume",
"start": 1680566400000,
"end": 1680912000000,
"owner": "Guillaume"
}
]
},
{
"name": "Sylvain",
"data": [
{
"name": "Sylvain",
"id": "Sylvain",
"owner": "Sylvain"
},
{
"name": "Congés sylvain test",
"id": 3,
"parent": "Sylvain",
"start": 1682899200000,
"end": 1683676800000,
"owner": "Sylvain"
}
]
},
{
"name": "Quentin",
"data": [
{
"name": "Quentin",
"id": "Quentin",
"owner": "Quentin"
},
{
"name": "Congés Quentin",
"id": 4,
"parent": "Quentin",
"start": 1681862400000,
"end": 1682035200000,
"owner": "Quentin"
}
]
}
]
// THE CHART
Highcharts.ganttChart('container', {
chart: {
styledMode: true
},
title: {
text: 'Highcharts Gantt in Styled Mode'
},
subtitle: {
text: 'Purely CSS-driven design'
},
xAxis: {
min: today.getTime() - (30 * day),
max: today.getTime() + (45 * day)
},
accessibility: {
keyboardNavigation: {
seriesNavigation: {
mode: 'serialize'
}
},
point: {
descriptionFormatter: function (point) {
var dependency = point.dependency &&
point.series.chart.get(point.dependency).name,
dependsOn = dependency ? ' Depends on ' + dependency + '.' : '';
return Highcharts.format(
'{point.yCategory}. Start {point.x:%Y-%m-%d}, end {point.x2:%Y-%m-%d}.{dependsOn}',
{ point, dependsOn }
);
}
}
},
lang: {
accessibility: {
axis: {
xAxisDescriptionPlural: 'The chart has a two-part X axis showing time in both week numbers and days.'
}
}
},
series: data
});

正如你所看到的，我想隐藏蓝色，橙色和粉红色的条。

Answer 1

可以设置父点的visible: false

let data = [{
"name": "Guillaume",
"data": [{
"name": "Guillaume",
"id": "Guillaume",
"owner": "Guillaume",
visible: false
},
{
"name": "Congés Guillaume",
"id": 1,
"parent": "Guillaume",
"start": 1678838400000,
"end": 1679097600000,
"owner": "Guillaume"
},
{
"name": "Congés G",
"id": 2,
"parent": "Guillaume",
"start": 1680566400000,
"end": 1680912000000,
"owner": "Guillaume"
}
]
},
{
"name": "Sylvain",
"data": [{
"name": "Sylvain",
"id": "Sylvain",
"owner": "Sylvain",
visible: false
},
{
"name": "Congés sylvain test",
"id": 3,
"parent": "Sylvain",
"start": 1682899200000,
"end": 1683676800000,
"owner": "Sylvain"
}
]
},
{
"name": "Quentin",
"data": [{
"name": "Quentin",
"id": "Quentin",
"owner": "Quentin",
visible: false
},
{
"name": "Congés Quentin",
"id": 4,
"parent": "Quentin",
"start": 1681862400000,
"end": 1682035200000,
"owner": "Quentin"
}
]
}
]

---

现场演示:http://jsfiddle.net/BlackLabel/82uebvjx/

Answer 2

必须有一个API方法来处理它。为此，您需要在文档中搜索:https://api.highcharts.com/gantt/global

但是快速修复可以使用css，正如你所看到的，它是工作的预期。

let today = new Date(),
day = 1000 * 60 * 60 * 24;
// Set to 00:00:00:000 today
today.setUTCHours(0);
today.setUTCMinutes(0);
today.setUTCSeconds(0);
today.setUTCMilliseconds(0);
let data = [
{
"name": "Guillaume",
"data": [
{
"name": "Guillaume",
"id": "Guillaume",
"owner": "Guillaume",
"className": 'parentBar'
},
{
"name": "Congés Guillaume",
"id": 1,
"parent": "Guillaume",
"start": 1678838400000,
"end": 1679097600000,
"owner": "Guillaume"
},
{
"name": "Congés G",
"id": 2,
"parent": "Guillaume",
"start": 1680566400000,
"end": 1680912000000,
"owner": "Guillaume"
}
]
},
{
"name": "Sylvain",
"data": [
{
"name": "Sylvain",
"id": "Sylvain",
"owner": "Sylvain",
"className": 'parentBar'
},
{
"name": "Congés sylvain test",
"id": 3,
"parent": "Sylvain",
"start": 1682899200000,
"end": 1683676800000,
"owner": "Sylvain"
}
]
},
{
"name": "Quentin",
"data": [
{
"name": "Quentin",
"id": "Quentin",
"owner": "Quentin",
"className": 'parentBar'
},
{
"name": "Congés Quentin",
"id": 4,
"parent": "Quentin",
"start": 1681862400000,
"end": 1682035200000,
"owner": "Quentin"
}
]
}
]
// THE CHART
Highcharts.ganttChart('container', {
chart: {
styledMode: true
},
title: {
text: 'Highcharts Gantt in Styled Mode'
},
subtitle: {
text: 'Purely CSS-driven design'
},
xAxis: {
min: today.getTime() - (30 * day),
max: today.getTime() + (45 * day)
},
accessibility: {
keyboardNavigation: {
seriesNavigation: {
mode: 'serialize'
}
},
point: {
descriptionFormatter: function (point) {
var dependency = point.dependency &&
point.series.chart.get(point.dependency).name,
dependsOn = dependency ? ' Depends on ' + dependency + '.' : '';
return Highcharts.format(
'{point.yCategory}. Start {point.x:%Y-%m-%d}, end {point.x2:%Y-%m-%d}.{dependsOn}',
{ point, dependsOn }
);
}
}
},
lang: {
accessibility: {
axis: {
xAxisDescriptionPlural: 'The chart has a two-part X axis showing time in both week numbers and days.'
}
}
},
series: data
});

@import "https://code.highcharts.com/css/highcharts.css";
#container {
max-width: 800px;
margin: 1em auto;
}
.highcharts-treegrid-node-level-1 {
font-size: 13px;
font-weight: bold;
fill: black;
}
.parentBar {
display: none;
}

<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
<script src="https://code.highcharts.com/gantt/modules/accessibility.js"></script>
<div id="container"></div>