0

如何使用谷歌的可视化 api 创建一个带有向下钻取选项的组织结构图。下面是我的代码 

<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<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:'<div class="main"><div><div class="img"><div class="imgdata"><img src="a1.jpg"         width="80" height="80"  

alt=""/></div>Unique Voters Contacted:90/100<br/>Fund 

Raised:1K/2K</div><br/><b>ABC</b><br/>Trivandrum<br/>Ph:9943441424</div></div></div>'}, 
'', 'The Leader'],
      [{v:'Jim', 

f:'<div class="main"><b><u>XYZ</u></b><br/><div><div class="img"><div class="imgdata">     <img src="a2.jpg" width="80" 

height="80"  alt=""/></div></div><br/><b>Secretary</b>    <br/>Trivandrum<br/>Ph:9249340424</div></div></div>'}, 
'Mike', 'Secretary'],
      [{v:'Alice',

f:'<div class="main"><b><u>PQR</u></b><br/><div><div class="img"><div class="imgdata">    <img src="a3.jpg" width="80" 

height="80"  alt=""/></div></div><br/><b>Secretary</b>    <br/>Trivandrum<br/>Ph:96739340424</b></div></div></div>'}, 
'Mike', 'The President'],

 [{v:'Bob', 

f:'<div class="main"><b><u>MNO</u></b><br/><div><div class="img"><div class="imgdata">     <img src="a4.jpg" width="80" 

height="80"  alt=""/></div></div><br/><b>DCC President</b>    <br/>Trivandrum<br/>Ph:9249340424</div></div></div>'}, 
'Jim', 'Secretary'],
 [{v:'Carol', 

 f:'<div class="main"><b><u>EFG</u></b><br/><div><div class="img"><div class="imgdata">   <img src="a5.jpg" width="80" 

height="80"  alt=""/></div></div><br/><b>Secretary</b>    <br/>Trivandrum<br/>Ph:9249340424</b></div></div></div>'}, 
'Mike', 'Secretary'],





    ]);
data.setRowProperty(1, 'style', 'nodeClass');
    var chart = new      google.visualization.OrgChart(document.getElementById('chart_div'));
    chart.draw(data, {allowHtml:true});
  }
</script>
</head>

4

0 回答 0