将超链接添加到 Google 图表时间线 RowLabel

Question

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

我几乎已经完成所有设置：我将时间轴嵌入到我们的 Google 网站中，它适用于目前添加的所有内容。

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

Google 已实施当前时间表的站点示例：https://sites.google.com/view/timeline-testing/home

我希望做的是： Timeline Concept

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {

    var container = document.getElementById('roadmap');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Category' });
    dataTable.addColumn({ type: 'string', id: 'Project' });
    dataTable.addColumn({ type: 'string', role: 'tooltip', 'p': {'html': true} });
    dataTable.addColumn({ type: 'string', id: 'style', role: 'style' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    
    dataTable.addRows([

      [ 'Category 1', 'Project 1', 
      '<p style="padding:5px"><b>Overall Project:</b> Program X <br><b>Description:</b> Test 
      description for Project 1 <hr> <b> Start:</b> 2020/4/1 <br> <b> End:</b> 2020/8/15</p>', 
      '#2B8000', new Date(2020, 3, 13), new Date(2020, 6, 13)],
      
      [ 'Category 1', 'Project 2',  
      '<p style="padding:5px"><b>Overall Project:</b> Program X <br><b>Description:</b> Test 
      description for Project 2 <hr> <b>Start:</b> 2020/4/1 <br> <b>End:</b> 2020/8/15</p>', 
      '#2B8000', new Date(2020, 4, 22), new Date(2020, 6, 24)],
      
      [ 'Category 1', 'Project 3', "test", '#2B8000', new Date(2020, 6, 13), new Date(2020, 9, 14)],
      [ 'Category 1', 'Project 4', "test", '#2B8000', new Date(2020, 9, 15), new Date(2020, 10, 30)],
      [ 'Category 2', 'Project 1', "test", '#2B8000', new Date(2020, 3, 1), new Date(2020, 4, 14)],
      [ 'Category 2', 'Project 2', "test", '#2B8000', new Date(2020, 4, 14), new Date(2020, 6, 15)],
      [ 'Category 2', 'Project 3', "test", '#00B0F0', new Date(2020, 4, 14), new Date(2020, 10, 30)],
      [ 'Category 3', 'Project 1', "test", '#2B8000', new Date(2020, 3, 1), new Date(2020, 4, 13)],
      [ 'Category 3', 'Project 2', "test", '#2B8000', new Date(2020, 3, 1), new Date(2020, 6, 10)],
      [ 'Category 3', 'Project 3', "test", '#2B8000', new Date(2020, 7, 19), new Date(2020, 10, 30)],
   
    ]);

     var options = {
        tooltip: {isHtml: true},
        legend: 'none'
     };
        
     function selectHandler() {
          var selectedItem = chart.getSelection();
          if (selectedItem = 0) {
            var link = dataTable.getValue(selectedItem.row, 7);
            window.open(link), '_blank');
          }
        }


    google.visualization.events.addListener(chart, 'select', selectHandler);
    chart.draw(dataTable, options);
  }
</script>

<style>div.google-visualization-tooltip { font-size: 16px; font-family: {"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Arial"}; }</style>
<div id="roadmap" style="height: 100%;"></div>

我试图让选择器识别被选中的 RowLabel。我也不确定将 link 存储在 DataTable 中的何处。它应该是另一个数据列吗？每当我尝试添加额外的数据列时，我都会收到错误消息，例如： dataTable.addColumn({ 类型: 'string', id: 'link' });

（将每行项目分开以便于阅读）

 dataTable.addColumn({ type: 'string', id: 'link' });
    
    dataTable.addRows([

      [ 'Category 1', 
        'Project 1', 
        '<p style="padding:5px"><b>Overall Project:</b> Program X <br><b>Description:</b> Test 
        description for Project 1 <hr> <b> Start:</b> 2020/4/1 <br> <b> End:</b> 2020/8/15</p>',
        '#2B8000', 
        new Date(2020, 3, 13), 
        new Date(2020, 6, 13), 
        'link to Google Site page'
      ]);

然后尝试使用 selectHandler() 函数参考第 7 selectedItem.row、7

列获取该数据点

 function selectHandler() {
          var selectedItem = chart.getSelection();
          if (selectedItem = 0) {
            var link = dataTable.getValue(selectedItem.row, 7);
            window.open(link), '_blank');
            console.log(link);
          }
        }

如有任何帮助，我们将不胜感激！

谢谢，

更新

代码的当前状态：rowLabel 的样式正在工作，但单击事件在 Google 站点嵌入上不起作用。 Google 站点测试 Link：https://sites.google.com/view/timeline-testing/home

<script src="https://www.gstatic.com/charts/loader.js"></script>

<script>
google.charts.load('current', {
  packages:['timeline']
}).then(function () {
  var container = document.getElementById('roadmap');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({type: 'string', id: 'Category'});
  dataTable.addColumn({type: 'string', id: 'Project'});
  dataTable.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
  dataTable.addColumn({type: 'string', id: 'style', role: 'style'});
  dataTable.addColumn({type: 'date', id: 'Start'});
  dataTable.addColumn({type: 'date', id: 'End'});

  dataTable.addRows([
    [{v: 'Category 1', p: {link: 'https://sites.google.com/view/timeline-testing/secondary-page/test-subpage'}}, 'Project 1', 'test', '#2B8000', new Date(2020, 3, 13), new Date(2020, 6, 13)],
    [{v: 'Category 1', p: {link: 'https://sites.google.com/view/timeline-testing/secondary-page/test-subpage'}}, 'Project 2', 'test', '#2B8000', new Date(2020, 4, 22), new Date(2020, 6, 24)],
    [{v: 'Category 1', p: {link: 'https://sites.google.com/view/timeline-testing/secondary-page/test-subpage'}}, 'Project 3', 'test', '#2B8000', new Date(2020, 6, 13), new Date(2020, 9, 14)],
    [{v: 'Category 1', p: {link: 'https://www.google.com'}}, 'Project 4', 'test', '#2B8000', new Date(2020, 9, 15), new Date(2020, 10, 30)],
    [{v: 'Category 2', p: {link: 'https://www.bing.com'}}, 'Project 1', 'test', '#2B8000', new Date(2020, 3, 1), new Date(2020, 4, 14)],
    [{v: 'Category 2', p: {link: 'https://www.bing.com'}}, 'Project 2', 'test', '#2B8000', new Date(2020, 4, 14), new Date(2020, 6, 15)],
    [{v: 'Category 2', p: {link: 'https://www.bing.com'}}, 'Project 3', 'test', '#00B0F0', new Date(2020, 4, 14), new Date(2020, 10, 30)],
    [{v: 'Category 3', p: {link: 'https://www.yahoo.com'}}, 'Project 1', 'test', '#2B8000', new Date(2020, 3, 1), new Date(2020, 4, 13)],
    [{v: 'Category 3', p: {link: 'https://www.yahoo.com'}}, 'Project 2', 'test', '#2B8000', new Date(2020, 3, 1), new Date(2020, 6, 10)],
    [{v: 'Category 3', p: {link: 'https://www.yahoo.com'}}, 'Project 3', 'test', '#2B8000', new Date(2020, 7, 19), new Date(2020, 10, 30)],
  ]);

  var options = {
    height: (dataTable.getNumberOfRows() * 42) + 42,
    tooltip: {isHtml: true},
    legend: 'none',
    timeline: {
      rowLabelStyle: {
        color: '#3399cc'
      }
    }
  };

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);
        label.setAttribute('style', 'cursor: pointer; text-decoration: underline;');
      }
    });
  }

  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.visualization.events.addListener(chart, 'ready', readyHandler);
  chart.draw(dataTable, options);
});


</script>

<div id="roadmap"></div>

Answer 1

在这种情况下，也许 'select' 事件不是最佳解决方案。

相反，我们可以将事件侦听器添加到 'ready' 事件的行标签。

在选项中，我们为行标签添加了独特的颜色。

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

我们可以使用独特的颜色来应用额外的 css 样式。

#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);
    }
  });
}

将link存入数据table,
我们可以对第一列使用对象表示法。
我们可以提供值 (v:) 和 link 作为属性 (p:).

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

然后我们可以使用 getProperty 方法从点击处理程序中的数据 table 中提取 link。

首先，我们要获取点击标签的内容，
并使用数据 table 方法 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', {
  packages:['timeline']
}).then(function () {
  var container = document.getElementById('roadmap');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({type: 'string', id: 'Category'});
  dataTable.addColumn({type: 'string', id: 'Project'});
  dataTable.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
  dataTable.addColumn({type: 'string', id: 'style', role: 'style'});
  dataTable.addColumn({type: 'date', id: 'Start'});
  dataTable.addColumn({type: 'date', id: 'End'});

  dataTable.addRows([
    [{v: 'Category 1', p: {link: 'https://www.google.com'}}, 'Project 1', 'test', '#2B8000', new Date(2020, 3, 13), new Date(2020, 6, 13)],
    [{v: 'Category 1', p: {link: 'https://www.google.com'}}, 'Project 2', 'test', '#2B8000', new Date(2020, 4, 22), new Date(2020, 6, 24)],
    [{v: 'Category 1', p: {link: 'https://www.google.com'}}, 'Project 3', 'test', '#2B8000', new Date(2020, 6, 13), new Date(2020, 9, 14)],
    [{v: 'Category 1', p: {link: 'https://www.google.com'}}, 'Project 4', 'test', '#2B8000', new Date(2020, 9, 15), new Date(2020, 10, 30)],
    [{v: 'Category 2', p: {link: 'https://www.bing.com'}}, 'Project 1', 'test', '#2B8000', new Date(2020, 3, 1), new Date(2020, 4, 14)],
    [{v: 'Category 2', p: {link: 'https://www.bing.com'}}, 'Project 2', 'test', '#2B8000', new Date(2020, 4, 14), new Date(2020, 6, 15)],
    [{v: 'Category 2', p: {link: 'https://www.bing.com'}}, 'Project 3', 'test', '#00B0F0', new Date(2020, 4, 14), new Date(2020, 10, 30)],
    [{v: 'Category 3', p: {link: 'https://www.yahoo.com'}}, 'Project 1', 'test', '#2B8000', new Date(2020, 3, 1), new Date(2020, 4, 13)],
    [{v: 'Category 3', p: {link: 'https://www.yahoo.com'}}, 'Project 2', 'test', '#2B8000', new Date(2020, 3, 1), new Date(2020, 6, 10)],
    [{v: 'Category 3', p: {link: 'https://www.yahoo.com'}}, 'Project 3', 'test', '#2B8000', new Date(2020, 7, 19), new Date(2020, 10, 30)],
  ]);

  var options = {
    height: (dataTable.getNumberOfRows() * 42) + 42,
    tooltip: {isHtml: true},
    legend: 'none',
    timeline: {
      rowLabelStyle: {
        color: '#3399cc'
      }
    }
  };

  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);
        label.setAttribute('style', 'cursor: pointer; text-decoration: underline;');
      }
    });
  }

  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');
      console.log(link);
    }
  }

  google.visualization.events.addListener(chart, 'ready', readyHandler);
  chart.draw(dataTable, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="roadmap"></div>

注意：图表会将选项中的所有颜色转换为小写。
(#3399cc) <-- 请务必为颜色使用小写选项，
less 准备好的处理程序可能无法找到文本元素...

将超链接添加到 Google 图表时间线 RowLabel

Adding Hyperlink to Google Chart Timeline RowLabel

html

javascript

css

charts

google-visualization