向 Google Chart Timeline RowLabel 添加超链接 [英] Adding Hyperlink to Google Chart Timeline RowLabel

问题描述

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

I am working on building a timeline for my teams Project Roadmap.

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

I have mostly everything setup: I am embedding the Timeline into our Google Site and it works with everything added so far.

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

I am hoping to add a link on the RowLabel that will bring me to another page within the Google Site. I have seen some solutions for adding a listener and being able to add a link to a specific row item but I am interested in attaching the link to the RowLabel itself, not the BarLabel.

实施了当前时间线的 Google 网站示例:https://sites.google.com/view/timeline-testing/home

Google Site example with current timeline implemented: https://sites.google.com/view/timeline-testing/home

我希望做的是:时间线概念

<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.我也不确定在 DataTable 中存储链接的位置.它应该是另一个数据列吗?每当我尝试添加额外的数据列时都会收到错误消息，例如:dataTable.addColumn({ type: 'string', id: 'link' });

I'm trying to get the selector to recognize the RowLabel being selected. I also am not sure where to store the link within the DataTable. Should it be another Data Column? I get an error whenever I've tried adding an additional Data Column like: dataTable.addColumn({ type: 'string', id: 'link' });

(分隔每个行项目以便于阅读)

(separated each line item for easier reading)

 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 获取该数据点

Then trying to grab that data point with the selectHandler() function reference column 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 Site Embed 上单击事件不起作用.Google 网站测试链接:https://sites.google.com/view/timeline-testing/home

Current state of code: Styling of rowLabel is working but click event does not work on Google Site Embed. Google Site Test 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>

推荐答案

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

in this case, maybe the 'select' event is not the best solution.

相反，我们可以向 'ready' 事件的行标签添加事件监听器.

instead, we can add event listeners to the row labels on the 'ready' event.

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

in the options, we add a unique color to the row labels.

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

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

we can use the unique color to apply additional css styles.

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

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

then use that unique color to find the chart elements and add the click event listener.

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:).

to store the link in the data table,
we can use object notation for the first column.
we can provide the value (v:) and the link as a property (p:).

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

然后我们可以使用 getProperty 方法从点击处理程序中的数据表中提取链接.

then we can use the getProperty method to pull the link from the data table in our click handler.

首先，我们要获取点击的标签内容，
并使用数据表方法 getFilteredRows 查找点击了哪个行标签.

first, we have to get the content of the label clicked,
and use data table method getFilteredRows to find which row label was clicked.

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

请参阅以下工作片段...

see following working snippet...

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) <-- 颜色一定要使用小写选项，
少了就绪处理程序可能无法找到文本元素...

note: the chart will convert all colors in the options to lower case.
(#3399cc) <-- be sure to use a lower case option for the color,
less the ready handler may not be able to find the text elements...

这篇关于向 Google Chart Timeline RowLabel 添加超链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！