javascript 在Highcharts甘特中隐藏父任务总长度

nuypyhwy  于 2023-04-04  发布在  Java
关注(0)|答案(2)|浏览(153)

我正在通过父任务对我的任务进行排序。每个用户都有自己的假期。因为假期之间可以设置一些时间,所以我想隐藏父任务的总长度,这样就不会反映实际的休假时间。
工作代码页: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
});

正如你所看到的,我想隐藏蓝色,橙子和粉红色的酒吧。

2eafrhcq

2eafrhcq1#

必须有一个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>
gojuced7

gojuced72#

可以为父点设置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/

相关问题