首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >基于Javascript的家谱造型

基于Javascript的家谱造型
EN

Stack Overflow用户
提问于 2013-08-29 15:46:25
回答 1查看 2.2K关注 0票数 1

我正在使用Google的可视化:组织图表库,

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

我试图改变样式并为每个节点创建链接。

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

Javascript:

代码语言: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

代码语言:javascript
复制
#chart_div{
    width:800px;
}

代码语言:javascript
复制
 <body>
    <div id='chart_div'></div>
  </body>
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-08-29 16:06:54

它使脚本崩溃,因为OrgChart对象没有一个#setRowProperty方法--您需要使用DataTable#setRowProperty方法:

代码语言:javascript
复制
data.setRowProperty((nodenumber), 'style', 'background-color:#FFF');

此外,在节点上设置“背景颜色”样式并不能满足您的要求,因为有一种“背景”样式将覆盖它,因此必须设置"background:#FFF“才能实际显示背景色。下面是一个基于代码的示例:http://jsfiddle.net/asgallant/YZ7CB/

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/18515469

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档