使用Javascript的家谱样式

Family Tree styling using Javascript

本文关键字：样式 家谱 Javascript 使用      更新时间：2023-09-26

我正在使用谷歌的可视化：组织结构图库，

文档链接：https://developers.google.com/chart/interactive/docs/gallery/orgchart

我正在尝试更改样式并为每个节点创建链接。

我一直在尝试使用：chart.setRowProperty((nodenumber), 'style', 'background-color:#FFF');对于每个节点，但是没有成功。无论我把代码放在哪里，都会破坏脚本。知道为什么吗？从每个独立节点创建链接的最佳方式是什么？

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>

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

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

此外，在节点上设置"背景色"样式不会达到您想要的效果，因为有一个"背景"样式会覆盖它，所以您必须设置"background:#FFF"才能真正显示背景色。下面是一个基于您的代码的示例：http://jsfiddle.net/asgallant/YZ7CB/

相关文章：