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>
