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

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

Googleチャートで組織図とテーブルをリンクさせる2

前回の図に引き続き、テーブルのレイアウトをカスタマイズしてみました。
こちらを参照させて頂きました。
配色は分かりやすいように極端にしてあります。
テーブルのレイアウトはCSSで作っておいて、「var table = new google.visualization.Table」〜の前にそのクラスを設定します。


<html>
  <head>
    <meta charset="UTF-8">
	<!--
		  headerRow・cssHeaderRow=ヘッダのラベルの色を設定
tableRow・cssTableRow=奇数のテーブルの色を設定
oddTableRow・cssOddTableRow=偶数のテーブルの色を設定
selectedTableRow・cssSelectedTableRow=クリックすると太字&フォントが大きくなる
hoverTableRow・cssHoverTableRow=マウスオーバーで色が変わる
headerCell・cssHeaderCell=ヘッダのフォントサイズと色、下線の色と太さを設定
tableCell・cssTableCell=テーブルの設定、下線の色と太さ、左寄せを設定
rowNumberCell・cssRowNumberCell=項目数(1-5)のセルの設定
	-->
	<style type="text/css">


	   .cssHeaderRow {
                background-color: green;
				
            }
            .cssTableRow {
                background-color: #F0F1F2;
            }
            .cssOddTableRow {
                background-color: #FFFFFF;
            }
            .cssSelectedTableRow {
                font-size: 20px;
                font-weight:bold;
            }
            .cssHoverTableRow {
                background-color: #ccc;
            }
            .cssHeaderCell {
			color: #FFFFFF;
                font-size: 16px;
				font-weight:bold;
				text-align: left;
                padding: 10px !important;
                border-bottom: 4px solid #1D5C79;
            }
            .cssTableCell {
                font-size: 13px;
                padding: 10px !important;
                border-bottom: 1px solid #DDD;
				text-align: left;
				color: blue;
				
				
            }
            .cssRowNumberCell {
                text-align:left;
				color: red;
				
            }


	</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', '役職');

//['名前', '上司', 'ツールチップ']
//['Jim', 'Mike','高い',  'あり' ]



data.addRows([
['爆劉戦隊蜀レンジャー', null,null ],
[{v:'ソソ様', f:'ソソ様<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]);

/*背景色いじる
//全部変える
 for(var i=0;i<5;i++){
        data.setRowProperty(i, 'selectedStyle', 'background-color:red;background-image:none');
      }
//指定して変える
data.setRowProperty(4, 'style', 'background-color:red;background-image:none');
      data.setRowProperty(5, 'selectedStyle', 'background-color:red;background-image:none');
	  data.setRowProperty(3, 'style', 'border: 1px solid green');
	  

*/

 for(var i=0;i<5;i++){
        data.setRowProperty(i, 'selectedStyle', 'background-color:red;background-image:none');
		data.setRowProperty(i, 'style', 'background-color:blue;background-image:none');
      }
	  
	  /*
	  headerRow・cssHeaderRow=ヘッダのラベルの色を設定
tableRow・cssTableRow=奇数のテーブルの色を設定
oddTableRow・cssOddTableRow=偶数のテーブルの色を設定
selectedTableRow・cssSelectedTableRow=クリックすると太字&フォントが大きくなる
hoverTableRow・cssHoverTableRow=マウスオーバーで色が変わる
headerCell・cssHeaderCell=ヘッダのフォントサイズと色、下線の色と太さを設定
tableCell・cssTableCell=テーブルの設定、下線の色と太さ、左寄せを設定
rowNumberCell・cssRowNumberCell=項目数(1-5)のセルの設定
	  */
	  
	  //テーブルレイアウト設定クラス
   var cssClassNames = {
                    'headerRow': 'cssHeaderRow',
                    'tableRow': 'cssTableRow',
                    'oddTableRow': 'cssOddTableRow',
                    'selectedTableRow': 'cssSelectedTableRow',
                    'hoverTableRow': 'cssHoverTableRow',
                    'headerCell': 'cssHeaderCell',
                    'tableCell': 'cssTableCell',
                    'rowNumberCell': 'cssRowNumberCell'
                };
                
				 var options = {'showRowNumber': true, 'allowHtml': true, 'cssClassNames': cssClassNames};



var orgchart = new google.visualization.OrgChart(
document.getElementById('gct_sample_orgchart_demo')); 
orgchart.draw(org_view, {allowHtml:true});

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);

// テーブル選択時に組織図を選択
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>