如何将超链接添加到谷歌图表组织结构图

How do you add a hyperlink to a Google Charts Org Chart?

本文关键字:结构图 谷歌 超链接 添加      更新时间:2023-09-26

Title基本上说明了一切,我需要添加一个到组织结构图/树的子"分支"的超链接。下面是代码:

  <html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {packages:['orgchart']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'link');
        data.addRows([
          [{v:'Manager', f:'Manager<div style="color:red; font-style:italic">Manager</div>'}, '', ''],
          [{v:'PS'}, 'Manager', 'https://developers.google.com/chart/interactive/docs/gallery/orgchart'],
          [{v:'ES'}, 'Manager', ''],
          [{v:'MSE'}, 'Manager', ''],
          [{v:'OEP'}, 'Manager', ''],
          ['', '', ''],
          ['', '', '']
        ]);
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        chart.draw(data, {allowHtml:true});

      }
    </script>
  </head>
  <body>
    <div id='chart_div'></div>
  </body>
</html>
<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {packages:['orgchart']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'link');
        data.addRows([
          [{v:'Manager', f:'Manager<div style="color:red; font-style:italic">Manager</div>'}, '', ''],
          [{v:'PS', f:'<a href="#">PS</a>'}, 'Manager', 'https://developers.google.com/chart/interactive/docs/gallery/orgchart'],
          [{v:'ES', f:'<a href="#">ES</a>'}, 'Manager', ''],
          [{v:'MSE', f:'<a href="#">MSE</a>'}, 'Manager', ''],
          [{v:'OEP', f:'<a href="#">OEP</a>'}, 'Manager', ''],
          ['', '', ''],
          ['', '', '']
        ]);
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        chart.draw(data, {allowHtml:true});

      }
    </script>
  </head>
  <body>
    <div id='chart_div'></div>
  </body>
</html>​