Javascript 将超链接添加到Google图表时间线行标签

我正在为我的团队项目路线图制定时间表

我已经基本上完成了所有的设置：我正在将时间线嵌入到我们的谷歌网站中，它可以处理到目前为止添加的所有内容

我希望在RowLabel上添加一个链接，将我带到Google站点的另一个页面。我已经看到了一些添加侦听器并能够添加到特定行项目的链接的解决方案，但我感兴趣的是将链接附加到行标签本身，而不是BarLabel

实施当前时间线的Google站点示例：

我希望做的是：

任何帮助都将不胜感激

谢谢

更新

代码的当前状态：rowLabel的样式正在工作，但单击事件在Google Site Embed上不起作用。谷歌网站测试链接：

google.charts.load（'current'{
软件包：[“时间线”]
}).然后（函数（）{
var container=document.getElementById（'roadmap'）；
var chart=newgoogle.visualization.Timeline（容器）；
var dataTable=new google.visualization.dataTable（）；
addColumn（{type:'string'，id:'Category'}）；
addColumn（{type:'string'，id:'Project'}）；
addColumn（{type:'string'，role:'tooltip'，p'：{'html'：true}}）；
addColumn（{type:'string'，id:'style'，role:'style'}）；
addColumn（{type:'date'，id:'Start'}）；
addColumn（{type:'date'，id:'End'}）；
dataTable.addRows([
[{v:'类别1'，p:{link:'https://sites.google.com/view/timeline-testing/secondary-page/test-subpage"项目1","测试","2B8000",新日期(2020年3月13日),新日期(2020年6月13日),，
[{v:'类别1'，p:{link:'https://sites.google.com/view/timeline-testing/secondary-page/test-subpage"项目2","测试","2B8000",新日期(2020年4月22日),新日期(2020年6月24日),，
[{v:'类别1'，p:{link:'https://sites.google.com/view/timeline-testing/secondary-page/test-subpage"项目3","测试","2B8000",新日期(2020,6,13),新日期(2020,9,14),，
[{v:'类别1'，p:{link:'https://www.google.com"项目4","测试","2B8000",新日期(2020年9月15日),新日期(2020年10月30日),，
[{v:'类别2'，p:{link:'https://www.bing.com"项目1","测试","2B8000",新日期(2020年3月1日),新日期(2020年4月14日),，
[{v:'类别2'，p:{link:'https://www.bing.com"项目2","测试","2B8000",新日期(2020年4月14日),新日期(2020年6月15日),，
[{v:'类别2'，p:{link:'https://www.bing.com"项目3","测试","00B0F0",新日期(2020年4月14日),新日期(2020年10月30日),，
[{v:'第3类'，p:{link:'https://www.yahoo.com"项目1","测试","2B8000",新日期(2020年3月1日),新日期(2020年4月13日),，
[{v:'第3类'，p:{link:'https://www.yahoo.com"项目2","测试","2B8000",新日期(2020年3月1日),新日期(2020年6月10日),，
[{v:'第3类'，p:{link:'https://www.yahoo.com"项目3","测试","2B8000",新日期(2020,7,19),新日期(2020,10,30),，
]);
变量选项={
高度：（dataTable.getNumberOfRows（）*42）+42，
工具提示：{isHtml:true}，
图例：“无”，
时间线：{
rowLabelStyle：{
颜色：“#3399cc”
}
}
};
函数readyHandler（）{
var labels=container.getElementsByTagName（'text'）；
Array.prototype.forEach.call（标签，函数（标签）{
if（label.getAttribute（'fill'）==options.timeline.rowLabelStyle.color）{
label.addEventListener（'click'，clickHandler）；
label.setAttribute（'style'、'光标：指针；文本装饰：下划线；'）；
}
});
}
函数clickHandler（发送方）{
var rowLabel=sender.target.textContent；
var dataRows=dataTable.getFilteredRows([{
列：0，
值：行标签
}]);
如果（dataRows.length>0）{
var link=dataTable.getProperty（dataRows[0]，0，'link'）；
打开（链接“空白”）；
}
}
google.visualization.events.addListener（图表'ready'，readyHandler）；
图表绘制（数据表、选项）；
});

在这种情况下，

'select'

事件可能不是最佳解决方案

相反，我们可以将事件侦听器添加到

'ready'

事件的行标签中

在选项中，我们向行标签添加唯一的颜色

timeline: {
  rowLabelStyle: {
    color: '#3399cc'
  }
}

我们可以使用独特的颜色来应用其他css样式

#roadmap text[fill="#3399cc"] {
  cursor: pointer;
  text-decoration: underline;
}

然后使用该唯一颜色查找图表元素并添加click事件侦听器

function readyHandler() {
  var labels = container.getElementsByTagName('text');
  Array.prototype.forEach.call(labels, function(label) {
    if (label.getAttribute('fill') === options.timeline.rowLabelStyle.color) {
      label.addEventListener('click', clickHandler);
    }
  });
}

要在数据表中存储链接，
我们可以对第一列使用对象表示法。
我们可以将值（

v:

）和链接作为属性（

p:

）提供

然后，我们可以使用

getProperty

方法从单击处理程序中的数据表中提取链接

首先，我们必须单击标签的内容，
并使用数据表方法

getFilteredRows

查找单击的行标签

function clickHandler(sender) {
  var rowLabel = sender.target.textContent;
  var dataRows = dataTable.getFilteredRows([{
    column: 0,
    value: rowLabel
  }]);
  if (dataRows.length > 0) {
    var link = dataTable.getProperty(dataRows[0], 0, 'link');
    window.open(link, '_blank');
  }
}

请参阅以下工作片段

google.charts.load（'current'{
软件包：[“时间线”]
}).然后（函数（）{
var container=document.getElementById（'roadmap'）；
var chart=newgoogle.visualization.Timeline（容器）；
var dataTable=new google.visualization.dataTable（）；
addColumn（{type:'string'，id:'Category'}）；
addColumn（{type:'string'，id:'Project'}）；
addColumn（{type:'string'，role:'tooltip'，p'：{'html'：true}}）；
addColumn（{type:'string'，id:'style'，role:'style'}）；
addColumn（{type:'date'，id:'Start'}）；
addColumn（{type:'date'，id:'End'}）；
dataTable.addRows([
[{v:'类别1'，p:{link:'https://www.google.com"项目1","测试","2B8000",新日期(2020年3月13日),新日期(2020年6月13日),，
[{v:'类别1'，p:{link:'https://www.google.com"项目2","测试","2B8000",新日期(2020年4月22日),新日期(2020年6月24日),，
[{v:'类别1'，p:{link:'https://www.google.com'}}，'项目3'，'t
timeline: {
  rowLabelStyle: {
    color: '#3399cc'
  }
}

#roadmap text[fill="#3399cc"] {
  cursor: pointer;
  text-decoration: underline;
}

function readyHandler() {
  var labels = container.getElementsByTagName('text');
  Array.prototype.forEach.call(labels, function(label) {
    if (label.getAttribute('fill') === options.timeline.rowLabelStyle.color) {
      label.addEventListener('click', clickHandler);
    }
  });
}

{v: 'Category 1', p: {link: 'https://www.google.com'}}

function clickHandler(sender) {
  var rowLabel = sender.target.textContent;
  var dataRows = dataTable.getFilteredRows([{
    column: 0,
    value: rowLabel
  }]);
  if (dataRows.length > 0) {
    var link = dataTable.getProperty(dataRows[0], 0, 'link');
    window.open(link, '_blank');
  }
}