javascript - 谷歌图表甘特图无法显示关键路径或轴

Question

我试图跟随这里的例子：

https://developers.google.com/chart/interactive/docs/gallery/ganttchart

我的代码如下所示：

      google.charts.load('current', {'packages':['gantt']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Task ID');
        data.addColumn('string', 'Task Name');
        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([



          ['5efbce41802562e233e21b9e',
          'Demolition' ,
           new Date(2020, 5, 8), 
           new Date(2020, 6, 24), 
           null,  
           100,  
           ''],

          ['5efbd34a802562e233e21bda',
          'Sealing, Flooring' ,
           new Date(2020, 6, 27), 
           new Date(2020, 7, 5), 
           null,  
           100,  
           '5efbce41802562e233e21b9e'],

          ['5efbd390802562e233e21be6',
          'Concrete Work' ,
           new Date(2020, 7, 10), 
           new Date(2020, 7, 14), 
           null,  
           100,  
           '5efbd34a802562e233e21bda'],

          ['5efbd55e802562e233e21c3c',
          'HVAC' ,
           new Date(2020, 7, 18), 
           new Date(2020, 7, 28), 
           null,  
           100,  
           '5efbce41802562e233e21b9e'],

          ['5efbd55e802562e233e21c43',
          'Fire Protection' ,
           new Date(2020, 8, 1), 
           new Date(2020, 8, 11), 
           null,  
           100,  
           '5efbd55e802562e233e21c3c'],

          ['5efbd55e802562e233e21c4a',
          'Framing and Drywalling' ,
           new Date(2020, 8, 13), 
           new Date(2020, 8, 25), 
           null,  
           100,  
           '5efbd55e802562e233e21c3c,5efbd55e802562e233e21c43,5efbd55e802562e233e21c51'],

          ['5efbd55e802562e233e21c51',
          'Electrical Upgrade' ,
           new Date(2020, 8, 2), 
           new Date(2020, 8, 11), 
           null,  
           100,  
           ''],

          ['5efbd55e802562e233e21c58',
          'Flooring' ,
           new Date(2020, 9, 5), 
           new Date(2020, 9, 16), 
           null,  
           100,  
           '5efbd390802562e233e21be6'],

          ['5efbd55e802562e233e21c5f',
          'Inspection and Remediation' ,
           new Date(2020, 9, 19), 
           new Date(2020, 9, 30), 
           null,  
           100,  
           '5efbd55e802562e233e21c4a'],
        ]);
        var trackHeight = 40;
        var options = {
        height: data.getNumberOfRows() * trackHeight + 200,
          width: 1024,
          gantt: {
              criticalPathEnabled: true,
              criticalPathStyle: {
                stroke: '#e64a19',
                strokeWidth: 5
              }

        };


  var chart = new google.visualization.Gantt(document.getElementById('gantt_5efbc530802562d3f4760a1f'));
        chart.draw(data, options);
    }

但我的图表如下所示：

我没有看到示例中的轴（图例），也没有看到关键路径。有任何想法吗？

谢谢，凯文

标签： javascriptchartsgoogle-visualizationgantt-chart