将超链接添加到Google Chart时间轴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 Site示例: 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 Site Test链接: 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;
}

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

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时间轴RowLabel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！