GoogleChartの組織図で、3つ下の階層までラインを引き延ばして
各層のブロックを飛ばしたいのですが可能でしょうか?
以下サイトに掲載されているコードを丸コピしています。
https://www.petitmonte.com/javascript/chart_orgc …
よろしくお願いいたします。
No.1ベストアンサー
- 回答日時:
こんにちは
Chartはまったく存じませんので、レファレンスを斜め読みしただけです
ので、ご参考までに。
◇ 図1
・中間の階層を省くことはできないようなので、一旦、設定しておいて非表示にしてみました。
あわよくばと思いましたが、やはりラインが切れてしまいますね。
◇表示内容をラインに合わせて表示してみました。
HTMLだと実態はtableで作成しているようですが、trにパディングが設定されている関係で高さ100%の縦線を入れてもラインが繋がらず、破線のようになってしまいました。
◇図2
とりあえずの手段として、
・表示項目の背景色をラインの色と同じにして、clipで1px分の幅だけ見せて、ラインのようにしてしまう。
完全に1本の線にはなりにくいですが、一応それっぽくなりました。
ちゃんと調べていませんが、ChartではSVGの表示も可能なようですので、SVG表示にすれば(もしかすると)非表示にするだけでラインは連続して表示されているのではないかと想像します。
(そちらの方が、多分、簡単で綺麗に表示できるかも)
斜め読みしている際に、Visualization API に hideRows() メソッドがあるのを見つけました。
これが利用できるのではないかと想像しますが、読み解いてはいません。
https://developers.google.com/chart/interactive/ …
ご参考までに、図2の表示の際のスクリプト部分を以下に載せておきます。
<script>
google.charts.load('current', {packages:["orgchart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
const data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Parent');
data.addRows([
[ 'ROOT', ''],
['A1','ROOT'], ['A2', 'A1'], ['A3', 'A2'],
['B1', 'ROOT'], ['B2', 'B1'], ['B3', 'B2'], ['B4', 'B3'],
['C1', 'ROOT']
]);
const line = `border-width: 0; box-shadow: none; background: #3388dd;
clip-path: polygon(50.5% 0, calc(50.5% + 1px) 0, calc(50.5% + 1px) 100%, 50.5% 100%);`;
for (let n = 4; n<7; n++){
data.setFormattedValue(n, 0, '');
data.setRowProperty(n, 'style', line);
}
var chart = new google.visualization.OrgChart(document.getElementById('chart'));
chart.draw(data, {'allowHtml':true});
}
</script>
fujillin 様
ご丁寧に対応下さり、ありがとうございます。
いただいたコードをこちらでも試してみましたが
白紙のページになるため、恐らくエラーになっているものと思われます。
以下コードですが、どこか間違っておりますでしょうか?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
-----ここにいただいたコードを差し込んでいます。-----
</head>
<body>
<!-- グラフの描画エリア -->
<div id="chart_div" style="width: 100%; height: 350px"></div>
</body>
</html>
No.3
- 回答日時:
No2です。
上手くいきませんね。
考えてみたら、実態参照が表示されるので、消えてしまっているみたい。
''の内容は
& n b s p ;
の空白を除いたものでスペースになっています。
(今度は、多分表示されると思いますが・・)
No.2
- 回答日時:
No1です。
連投失礼。
なぜか、スペースのセットが消えてしまっていましたので、訂正しておきます。
誤:data.setFormattedValue(n, 0, '');
正:data.setFormattedValue(n, 0, '');
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
- JavaScript 階層別の組織図の自動作成について 1 2022/10/26 13:42
- 環境学・エコロジー 国連の専門家組織の最新報告で、オゾン層が回復しつつあることが示された https://www.nhk 1 2023/07/12 14:55
- HTML・CSS サイトをマルチデバイス対応にする為の準備や、CSSなどのおすすめサンプル集やアドバイスを頂きたいです 1 2022/07/13 22:15
- 歯の病気 重度の歯周病における歯科医の選び方 3 2022/08/14 14:50
- 戦争・テロ・デモ これでリーダーと呼べるのか? 4 2023/08/13 21:43
- PHP 掲示板のセキュリティについてアドバイスお願い致します 1 2023/08/11 20:44
- JavaScript JavaScript|特定URLだった時、特定の要素を変更するコードの書き方を教えてほしいです 2 2023/08/25 21:43
- PHP 画像ファイルの名前をそのままURLにする 3 2022/10/16 11:18
- その他(プログラミング・Web制作) スプレッドシート 一括でQRコードを生成したい 2 2022/12/15 11:36
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
既婚者同士で、毎日職場で会う...
-
ガラケーを使っている私がLINE...
-
普通の携番で電話中の時に、ラ...
-
ず〜と未読無視だったのに、や...
-
夜9-10時にLINEを送って、既読...
-
女友達からのLINEが毎日あって...
-
彼氏にいつ電話をかけても通話...
-
4ヶ月くらい毎日ラインしてた男...
-
テスト期間中に好きな人からLIN...
-
仕事の先輩から「休んでいいよ...
-
くびれのある女性が魅力的だと...
-
セフレからの追いラインがうざ...
-
姉の旦那さんが亡くなりました
-
メンタルの理由でLINEを返せな...
-
メンタル的な理由で、ラインを...
-
こういう人どう思いますか?毎...
-
LINEを送ったと同時に既読がつ...
-
独身男性が既婚女性に片想いし...
-
だいたい街で一人で歩いてると...
-
車校 効果測定について 第一段...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
既婚者同士で、毎日職場で会う...
-
メンタルの理由でLINEを返せな...
-
普通の携番で電話中の時に、ラ...
-
車校 効果測定について 第一段...
-
メンタル的な理由で、ラインを...
-
ず〜と未読無視だったのに、や...
-
仕事の先輩から「休んでいいよ...
-
夜9-10時にLINEを送って、既読...
-
ホワイトボードの糊の跡
-
女友達からのLINEが毎日あって...
-
勤務医の彼氏から急に連絡がな...
-
ガラケーを使っている私がLINE...
-
小学四年生の漢字の宿題で ぐん...
-
くびれのある女性が魅力的だと...
-
Tバックをする時
-
ラインブロックしますからと宣...
-
4ヶ月くらい毎日ラインしてた男...
-
セフレからのラインを自分から...
-
セフレからの追いラインがうざ...
-
Tバックをはいている女性について
おすすめ情報
すみません、ID名でした。
chartにしたら動きました。
おっしゃるように、ブロックを消して繋げている感じですね。
やはりこうするしかないのでしょうか。