小贝子编程

将超链接添加到Google图表日程表行标签



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

我已经设置好了大部分内容：我正在将Timeline嵌入我们的谷歌网站，它可以处理到目前为止添加的所有内容。

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

实施了当前时间表的谷歌网站示例：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'｝(

(将每一行项目分开以便于阅读(

 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的样式正在工作，但点击事件在谷歌网站嵌入上不起作用。谷歌网站测试链接：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'事件可能不是最佳解决方案。

相反，我们可以将事件侦听器添加到'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:(。

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

然后我们可以使用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', {
  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(<--请确保对颜色使用小写选项，
否则ready处理程序可能无法找到文本元素。。。

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium