1

我想添加 HTML URL到 Google 可视化：组织结构图，我在 Google API 中找不到该选项，请帮忙。下面的示例代码

<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', 'ToolTip');
        data.addRows([
          [{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'}, '', 'The President'],
          [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'}, 'Mike', 'VP'],
          ['Alice', 'Mike', ''],
          ['Bob', 'Jim', 'Bob Sponge'],
          ['Carol', 'Bob', '']
        ]);
        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>
4

1 回答 1

2

只需将链接添加到单元格的格式化值：

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('string', 'Parent');

    data.addRows([
        [{v: 'parent_node', f: 'Parent Node'}, null],
        [{v: 'child_node_1', f: '<a href="path/to/target">Child Node 1</a>'}, 'parent_node'],
        [{v: 'child_node_2', f: 'Child Node 2'}, 'parent_node']
    ]);

    var chart = new google.visualization.OrgChart(document.querySelector('#chart_div'));
    chart.draw(data, {allowHtml: true});
}

见http://jsfiddle.net/asgallant/LPHtr/1/

于 2013-08-17T15:44:19.387 回答