トップ  >  2013年  >  2013.02.15 [Google Chart Tools] Organizational Chart
features [Google Chart Tools] Organizational Chart
2013.02.15記
Google Chart Tools の Organizational Chart(組織図)を使って、サイトマップみたいなものを試してみた。
https://developers.google.com/chart/interactive/docs/gallery/orgchart

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 data1 = new google.visualization.DataTable();
  data1.addColumn('string', 'Name');
  data1.addColumn('string', 'Manager');
  data1.addColumn('string', 'ToolTip');
  data1.addRows([
    [{v:'Home', f:'<a href="/">ホーム</a>'}, '', '啓文社'],
    [{v:'Outline', f:'<a href="/modules/k/">会社概要</a>'}, '', ''],
    [{v:'News', f:'<a href="/modules/news/">お知らせ</a>'}, '', ''],
    [{v:'Archive', f:'<a href="/modules/news/index.php?page=archive">アーカイブ</a>'}, 'News', ''],
    [{v:'Features', f:'<a href="/modules/features/index.php?content_id=1">Features</a>'}, '', ''],
    [{v:'F1', f:'<a href="/modules/features/index.php?content_id=123">2013-1-15</a>'}, 'Features', ''],
    [{v:'F2', f:'<a href="/modules/features/index.php?content_id=122">2012-12-15</a>'}, 'F1', ''],
    [{v:'F3', f:'<a href="/modules/features/index.php?content_id=121">2012-11-15</a>'}, 'F2', ''],
  ]);
  var data2 = new google.visualization.DataTable();
  data2.addColumn('string', 'Name');
  data2.addColumn('string', 'Manager');
  data2.addColumn('string', 'ToolTip');
  data2.addRows([
    [{v:'紹介', f:'<a href="/modules/introduction/">自費出版<br>紹介</a>'}, '', ''],
    [{v:'Inq', f:'問い合わせ'}, '', ''],
    [{v:'Inq1', f:'<a href="/modules/inquirysp/?op=0">問合/TEL/FAX</a>'}, 'Inq', ''],
    [{v:'Inq2', f:'<a href="/modules/inquirysp/?op=1">見積相談</a>'}, 'Inq1', ''],

    [{v:'Gallay', f:'<a href="/modules/g0/">ギャラリー</a>'}, '', ''],
    [{v:'Forum', f:'<a href="/modules/features/index.php?content_id=1">フォーラム</a>'}, '', '']
  ]);
var chart1 = new google.visualization.OrgChart(document.getElementById('chart_div1'));
var chart2 = new google.visualization.OrgChart(document.getElementById('chart_div2'));
chart1.draw(data1, {allowHtml:true});
chart2.draw(data2, {allowHtml:true});
}
</script>

HTML


<div id="chart">
  <div id="chart_div1"></div>
  <div id="chart_div2"></div>
</div>
設置したら、このサイトのスタイルシートの影響を若干受けた感じですが表示できました。オプションを考える必要があるのかな?
前
2013.03.15 Ruby
カテゴリートップ
2013年
次
2013.01.15 ベストセラー+2012

PAGE TOP 
メニュー
サイト内検索
ログイン
ユーザ名:

パスワード:


パスワード紛失

新規登録
Copyright(C) 1999-2018 keibunsya all right reserved.