0

Google の視覚化 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