在 Highcharts Gantt 中隐藏父任务总长度

问题描述 投票:0回答:0

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

工作代码笔: 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
});

如你所见,我想隐藏蓝色、橙色和粉色条。

javascript highcharts gantt-chart
© www.soinside.com 2019 - 2024. All rights reserved.