読者です 読者をやめる 読者になる 読者になる

まゆたまガジェット開発逆引き辞典

電子工作やプログラミングのHowtoを逆引き形式で掲載しています。作りたいモノを決めて学んでいくスタイル。プログラマではないので、コードの汚さはお許しを

Googleチャートの組織図(Org Chart)の外観を変える

GoogleチャートのOrgチャートの外観をCSSで設定します。
これで影Uzeeee!とかフォント変えたい!とかから解放されますね。
(全体のフォントサイズは変えられないっぽいです。個別には変更可能ですが)
下のテーブルとのリンクをベースにしているため、ややコードが複雑になっていますが、
最初にCSSで設定しておいて、.drawのところにnodeClass:設定したCSSの名前、selectedNodeClass:設定したCSSの名前
としてあげればOKです。
また上記のように冒頭にCSSを書いて適用させた場合でも、.setRowPropertyで個別に外観を設定することができます。

Google Chartの本家フォーラムを参考にさせて頂きました。


<html>
  <head>
    <meta charset="UTF-8">
	<!--
	text-align、vertical-align 文字の位置
	cursor カーソルの形状
	border 枠線
	-moz-border-radiusと-webkit-border-radius 角を丸くする
	-moz-box-shadowと-webkit-box-shadow 影をつける
	background-color 色指定
	background: -webkit-gradient グラデーション
	-->
	<!--
	.myNodeClass 組織図の何も選択していない状態の外見の設定
	.mySelectedNodeClass 組織図の選択した状態の外見の設定
	.cssHeaderRow以下 テーブルの外見設定
	-->
	
	<style type="text/css">
	
.myNodeClass {
    text-align: center;
    vertical-align: middle;
font-family: "ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN",'メイリオ',Meiryo,sans-serif;
font-weight: bold;
    cursor: default;
    border: 2px solid #F2F3C6;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 3px;
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 3px;
    background-color: #FCFECE;
	
    
}
.mySelectedNodeClass {
    border: 2px solid #D9D7A6;
    background-color: #CBC99B;
    
}

	   .cssHeaderRow {
                background-color: #FFFFFF;
				
            }
            .cssTableRow {
                background-color: #FCFECE;
            }
            .cssOddTableRow {
                background-color: #FFFFFF;
            }
            .cssSelectedTableRow {
                font-size: 20px;
                font-weight:bold;
            }
            .cssHoverTableRow {
                background-color: #D9D7A6;
            }
            .cssHeaderCell {
			color: #58B9AD;
                font-size: 13px;
				font-weight:bold;
				text-align: left;
                padding: 10px !important;
                border-bottom: 4px solid #58B9AD;
				
            }
            .cssTableCell {
			color: #441B43;
                font-size: 15px;
                padding: 10px !important;
                border-bottom: 1px solid #DDD;
				
				
				
				
				
            }
            .cssRowNumberCell {
                text-align:left;
				color: #58B9AD;
				
            }
	   

	</style>
	
     <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>


google.load('visualization', '1', {packages: ['orgchart', 'table']});
google.setOnLoadCallback(
function () {
var data = new google.visualization.DataTable();


data.addColumn('string', '名前');
data.addColumn('string', '上司');
data.addColumn('string', '役職');

//['名前', '上司', 'ツールチップ']


data.addRows([
['蜀レンジャー', null,null ],
[{v:'ソソ様', f:'<span style="color: #441B43;">ソソ様</span><br/><a href="http://www.yahoo.co.jp">孟徳</a>'}, '蜀レンジャー','魔王ツァオツァオ' ],
['劉備', '蜀レンジャー',{v:'ヒロイン', f:'<a href="http://www.yahoo.co.jp">ヒロイン</a>'}],
['孫権', '蜀レンジャー', {v:'碧眼皇太子', f:'碧眼皇太子<a href="http://www.yahoo.co.jp">Link</a>'}], 
['惇兄', 'ソソ様','トニー・ゲンジョウ']
]);



var org_view = new google.visualization.DataView(data);
org_view.setColumns([0, 1]);

//組織図の色を指定して変える(全体の外見の設定をCSSでやっていても大丈夫)
data.setRowProperty(2, 'style', 'background-color:lime;background-image:none');
      data.setRowProperty(2, 'selectedStyle', 'background-color:green;background-image:none');
	
	  
	  
	  /*headerRow・cssHeaderRow=いちばん上のラベルの色
tableRow・cssTableRowとoddTableRow・cssOddTableRow=色の設定でtableRowを残すと奇数の項目が、oddTableRowを残すと偶数の項目の色が変わる
selectedTableRow・cssSelectedTableRow=クリックすると太字
hoverTableRow・cssHoverTableRow=マウスオーバーで色が変わる
headerCell・cssHeaderCell=タイトルをクリックすると並べ替え。そのときに色が変わる
tableCell・cssTableCell=テーブルの設定
rowNumberCell・cssRowNumberCell=項目数のセルの設定
	  */
   var cssClassNames = {
                    'headerRow': 'cssHeaderRow',
                    'tableRow': 'cssTableRow',
                    'oddTableRow': 'cssOddTableRow',
                    'selectedTableRow': 'cssSelectedTableRow',
                    'hoverTableRow': 'cssHoverTableRow',
                    'headerCell': 'cssHeaderCell',
                    'tableCell': 'cssTableCell',
                    'rowNumberCell': 'cssRowNumberCell'
                };
                
				 var options_table = {'showRowNumber': true, 'allowHtml': true, 'cssClassNames': cssClassNames};


var orgchart = new google.visualization.OrgChart(
document.getElementById('gct_sample_orgchart_demo')); 

//nodeClassとselectedNodeClassにCSSで設定した名前を設定する
orgchart.draw(org_view, {
            allowHtml:true,
            nodeClass: 'myNodeClass',
            selectedNodeClass: 'mySelectedNodeClass'
        });

var table_view = new google.visualization.DataView(data);
table_view.setColumns([0, 2]);

var table = new google.visualization.Table(
document.getElementById('gct_sample_orgchart_demo_table')); 
table.draw(table_view, options_table);

// テーブル選択時に組織図を選択
google.visualization.events.addListener(table, 'select', function() { 
orgchart.setSelection(table.getSelection());
});

// 組織図選択時にテーブルを選択
google.visualization.events.addListener(orgchart, 'select', function() { 
table.setSelection(orgchart.getSelection());
});


}
);


</script>

  </head>
  <body>
 


<div style="overflow-x: auto; padding:1px; margin-bottom: 1.2em;"><table> 
<tr>
<td>
<div id="gct_sample_orgchart_demo" style="width: 220px;padding: 1px 20px 1px 1px;"></div> 
</td>
<td>
<div id="gct_sample_orgchart_demo_table" style="width: 500px;"></div> 
</td>
</tr>
</table></div>

</body>
</html>