如何在Google甘特图、动态图表中隐藏行或指定颜色

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

我有一个谷歌甘特图,我终于得到了所有的信息。 我必须使用调色板 [ ] 添加颜色(来自自定义 Google 甘特图中的条形颜色)我想要基于任务是否是项目主要、过期、已过期、正在审核或已完成。 当我将所有这些变量作为单独的不同资源时,这很有效。 但后来我将任务状态从逾期更改为正在审核。 这意味着不再有任务逾期。 这使得过期颜色之后的任何颜色规格都不同,过期之后出现的资源颜色变成了红色过期颜色,其他所有内容都移回了一种。完全抛弃了配色方案。 在我看来,我唯一的解决办法看起来很无聊,那就是强制记录按顺序指定的每个资源以及项目的开始日期和一天的持续时间。 有没有办法可以隐藏关键行(始终是前 5/6),以便我只拥有任务中的数据。 我希望我只是做错了什么,但从谷歌甘特图看来,它已经处于测试阶段多年了。

代码如下。

<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {
            'packages': ['gantt']
        });
        google.charts.setOnLoadCallback(drawChart);

        function daysToMilliseconds(days) {
            return days * 24 * 60 * 60 * 1000;
        }

        function drawChart() {

            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Task ID');
            data.addColumn('string', 'Task Name');
            data.addColumn('string', 'Status');
            data.addColumn('date', 'Start Date');
            data.addColumn('date', 'End Date');
            data.addColumn('number', 'Duration');
            data.addColumn('number', 'Percent Complete');
            data.addColumn('string', 'Dependencies');

            data.addRows([ ['Key_title', 'Key','Project',new Date(2023, 4,  24), null, 1,  null,  null],
    ['Key_1', 'Project','Project',new Date(2023, 4,  24), null, 1,  null,  null],
    ['Key2', 'Overdue','Overdue', new Date(2023, 4,  24), null, 1,  null,  null],
    ['Key3', 'In date','In date', new Date(2023, 4,  24),null , 1,  null,  null],
    ['Key4', 'Complete','Complete', new Date(2023, 4,  24),null , 1,  null,  null],
    ['Key5', 'Under Review','Under Review', new Date(2023, 4,  24), null, 1,  null,  null],
    ['proj_1', 'First Project','Project', new Date(2023, 4,  24), new Date(2023, 7,  24), null,  null,  null], ['p_2', 'Task 2','Overdue',
    new Date(2023, 4,  24), new Date(2023, 6,  13), null, 70 , null], ['s_5', 'Sub on Task 2','Complete' ,
            null, new Date(2023, 6,  26),daysToMilliseconds(1), 100, 'p_2'], ['p_1', 'First Task','In date',
    new Date(2023, 4,  25), new Date(2023, 6,  28), null, 74 , null], ['s_1', 'sub tsk','Complete' ,
            null, new Date(2023, 6,  25),daysToMilliseconds(3), 100, 'p_1'], ['s_2', 'subtsk 2','Complete' ,
            null, new Date(2023, 6,  26),daysToMilliseconds(2), 100, 'p_1'], ['s_3', 'Task Name date testing','Under Review' ,
            null, new Date(2023, 6,  26),daysToMilliseconds(8), 90, 'p_1'] ]);            var options = {
    height: 900,
    gantt: {
    trackHeight: 50,
    labelStyle: {
        fontName: 'Arial',
        fontSize: 17
      },
    palette: [
        {
          'color': '#4D4D48',
          'dark': '#030303',
          'light': '#969696'
        },
        {   
            'color': '#8C0202',
            'dark': '#541717',
            'light': '#CF6A6A'
          },
          {
            'color': '#119100',
            'dark': '#2F6628',
            'light': '#62C257'
          },
          {
            'color': '#04BFD4',
            'dark': '#0098A6',
            'light': '#00EAFF'
          },
          {
            'color': '#B8B800',
            'dark': '#6B6B2F',
            'light': '#EBEB70'
          }
      ]
     }
     };            var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
            chart.draw(data, options);
        }
    </script>
</head>

</html>

以上目前给了我current results

在每种类型的资源都有的情况下,我一切都正常工作,但并不是每个项目都会有延迟任务或完成任务。 如果需要,很乐意添加更多信息。

编辑: 我尝试添加 data.hideRows([1,2,3,4,5]); 上面的 var 图表 - 新的 google.visulization...

但出现以下错误,与 data.hideColumns 相同 VM12694:37 未捕获(承诺)类型错误:data.hideRows 不是函数 在drawChart(在(jquery-1.11.0.min.js:2:2616),:37:96)

进行评估
google-visualization gantt-chart
© www.soinside.com 2019 - 2024. All rights reserved.