家譜造型使用Javascript

我使用谷歌的可視化：組織結構圖圖書館，家譜造型使用Javascript

鏈接到文件：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>

來源

2013-08-29 Tomi

請嘗試在此處運行它https://code.google.com/apis/ajax/playground/?type=visualization#org_chart –

它崩潰，因爲OrgChar腳本T類型的對象不具有#setRowProperty方法 - 你要使用的數據表＃setRowProperty方法：

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

此外，設置「背景色」風格的節點上不會做你想做的，因爲有是一種可以覆蓋它的「背景」風格，所以你必須設置「背景：#FFF」來實際獲得背景色。以下是基於您的代碼的示例：http://jsfiddle.net/asgallant/YZ7CB/

來源

2013-08-29 16:06:54 asgallant

什麼是最佳方式節點到另一個頁面？是爲每個節點創建某種選擇事件還是有一個更簡單的方法？ – Tomi

我設法通過在節點內創建div來創建鏈接：[{v：'Parent'，f：'

Parent

'}，''，'']，小提琴：http://jsfiddle.net/YZ7CB/3/有人想知道爲什麼格式在 Tomi

家譜造型使用Javascript

回答

相關問題