如何在Javascript / AngularJS中将Google甘特图的Y轴设置为超链接？

编程问答 2022-06-08

问题描述

我有关于甘特图的动态数据。我想为Y轴数据添加超链接选项，这会将我导航到另一页。

下面给出的代码具有动态数据。 Y轴上的任务名称必须在超链接中。右键单击超链接，它应该导航到另一页。

 google.charts.load('current',{
  packages:['gantt']
}).then(function () {
  var container = document.getElementById('gantt');
  var chart = new google.visualization.Gantt(container);  
    var dataTable = new google.visualization.DataTable();
      dataTable.addColumn('string','ModelId');
      dataTable.addColumn('string','TaskName');
      dataTable.addColumn('date','startDate');
      //dataTable.addColumn('date','draftDate');
      dataTable.addColumn('date','endDate');
      dataTable.addColumn('number','PercentComplete');
       dataTable.addColumn('number','Duration');
     dataTable.addColumn('string','Dependencies');   
 var data = [{
"ModelId":"1034","TaskName": "Model 1","startDate":"10-Aug-2020","endDate":"20-Aug-2020","draftDate":"14-Aug-2020","Duration":null,"PercentComplete":100
},{
"ModelId":"1035","TaskName": "Model 2","startDate":"10-Sep-2020","endDate":"20-Dec-2020","draftDate":"14-Oct-2020","PercentComplete":100
}];
  data.forEach(function (row) {
  console.log(data);
    dataTable.addRow([
      row.ModelId,// 'Task ID'
      row.TaskName,// 'Task Name'
     new Date(row.startDate),// 'Start Date'
     // new Date(row.draftDate),// 'Draft Date'
      new Date(row.endDate),// 'End Date'
      row.PercentComplete,// 'Percent Complete'
      row.Duration,null                       // 'Duration'
    ]);
    console.log("hii");
  });
  window.addEventListener('resize',drawChart,false);
  drawChart();
  var daterangeStart = dataTable.getColumnRange(2);
  var daterangeEnd = dataTable.getColumnRange(3);
  var formatDate = new google.visualization.DateFormat({
    pattern: 'MM/dd/yyyy'
  });
  var rowHeight = 45;

  var options = {
    height: ((dataTable.getNumberOfRows() * rowHeight) + rowHeight),gantt: {
    palette: [
      {
        "color": "#4cc9ac","dark": "#4cc9ac","light": "#4cc9ac"
      }
    ]
      
    }
  };
  function drawChart() {
    chart.draw(dataTable,options);
  }   
});

//HTML Code:
<html>
<body>
    <div id="gantt"></div>
</body>
</html>

期待答案。预先感谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

chartsgantt-chartgoogle-visualizationjavascript