如何在Google Charts组织结构图中添加超链接?

时间:2013-08-09 17:28:41

标签: javascript html charts

标题基本上说明了一切,我需要添加一个超链接到组织图表/树的子“分支”。这是下面的代码:

  <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>

1 个答案:

答案 0 :(得分:1)

<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>​