1

I'm using Google's Visualization: Organizational Chart library,

Link to documentation: https://developers.google.com/chart/interactive/docs/gallery/orgchart

I'm trying to change the style and create links for each node.

I've been trying to use: chart.setRowProperty((nodenumber), 'style', 'background-color:#FFF'); for each node but unsuccessfully. Wherever I place that code just crashes the script. Any idea why? What would be the best way to create links from each independent node?

Javascript:

<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', 'parent');
    data.addColumn('string', 'hover');
    data.addRows([
      ['Parent', '', ''],
      ['Kid1', 'Parent', ''],
      ['Kid2', 'Parent', ''],
      ['GreatKid3', 'Kid1', ''],
      ['GreatKid4', 'Kid1', ''],
      ['GreatKid5', 'Kid2', ''],
      ['GreatGreatKid6', 'GreatKid5', ''],
      ['GreatGreatKid7', 'GreatKid5', ''],

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

CSS

#chart_div{
    width:800px;
}

HTML

 <body>
    <div id='chart_div'></div>
  </body>
4

1 回答 1

2

它使脚本崩溃，因为 OrgChart 对象没有 #setRowProperty 方法 - 您想使用 DataTable#setRowProperty 方法：

data.setRowProperty((nodenumber), 'style', 'background-color:#FFF');

此外，在节点上设置“背景颜色”样式不会做你想要的，因为有一个“背景”样式会覆盖它，所以你必须设置“背景：#FFF”才能真正获得背景颜色来显示。这是一个基于您的代码的示例：http: //jsfiddle.net/asgallant/YZ7CB/

于 2013-08-29T16:06:54.053 回答