Google visualization 使用google visualization api向下搜索组织结构图选项_Google Visualization_Orgchart

Google visualization 使用google visualization api向下搜索组织结构图选项

google-visualization

Google visualization 使用google visualization api向下搜索组织结构图选项,google-visualization,orgchart,Google Visualization,Orgchart,我如何使用谷歌的可视化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/j

我如何使用谷歌的可视化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>


load（'visualization'，'1'，{packages:['orgchart']}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Name'）；
data.addColumn（'string'，'Manager'）；
data.addColumn（'string'，'ToolTip'）；
data.addRows([
[{v:'Mike'，
f:'联系的唯一选民：90/100
基金
升高：1K/2K
ABC
特里凡德伦
Ph:9943441424'}，
“领导者”]，
[{v:“吉姆”，
f:'XYZ

秘书
Trivandrum
Ph:9249340424'}，
“迈克”、“秘书”]，
[{v:'Alice'，
f:'PQR

秘书
特里凡德伦
Ph:96739340424'}，
“迈克”，“总统”]，
[{v:'Bob'，
f:'MNO

DCC总裁
Trivandrum
Ph:9249340424'}，
“吉姆”、“秘书”]，
[{v:'卡罗尔'，
f:'EFG

秘书
特里凡德伦
Ph:9249340424'}，
“迈克”、“秘书”]，
]);
setRowProperty（1，'style'，'nodeClass'）；
var chart=new google.visualization.OrgChart（document.getElementById（'chart_div'））；
chart.draw（数据，{allowtml:true}）；
}

您能描述一下您希望在向下展开时发生什么吗？我想在鼠标单击时突出显示一个节点，尝试设置“selectedNodeClass”选项（有关详细信息，请参阅）。在CSS中，您可以为类指定样式以实现突出显示效果