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>
