Google の Visualization: Organizational Chart ライブラリを使用しています。
ドキュメントへのリンク: 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>