GoogleChartの組織図について

解決済

質問者：DDddDDdd11221122
質問日時：2022/07/05 16:11
回答数：3件

GoogleChartの組織図で、３つ下の階層までラインを引き延ばして
各層のブロックを飛ばしたいのですが可能でしょうか？

以下サイトに掲載されているコードを丸コピしています。
https://www.petitmonte.com/javascript/chart_orgc …

よろしくお願いいたします。

すみません、ID名でした。
chartにしたら動きました。

おっしゃるように、ブロックを消して繋げている感じですね。
やはりこうするしかないのでしょうか。

No.1の回答に寄せられた補足コメントです。補足日時：2022/07/06 13:30
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.1ベストアンサー

回答者： fujillin
回答日時：2022/07/06 13:04

こんにちは

Chartはまったく存じませんので、レファレンスを斜め読みしただけです
ので、ご参考までに。

◇ 図１
・中間の階層を省くことはできないようなので、一旦、設定しておいて非表示にしてみました。
あわよくばと思いましたが、やはりラインが切れてしまいますね。

◇表示内容をラインに合わせて表示してみました。
HTMLだと実態はtableで作成しているようですが、trにパディングが設定されている関係で高さ100％の縦線を入れてもラインが繋がらず、破線のようになってしまいました。

◇図２
とりあえずの手段として、
・表示項目の背景色をラインの色と同じにして、clipで1px分の幅だけ見せて、ラインのようにしてしまう。
完全に1本の線にはなりにくいですが、一応それっぽくなりました。

ちゃんと調べていませんが、ChartではSVGの表示も可能なようですので、SVG表示にすれば（もしかすると）非表示にするだけでラインは連続して表示されているのではないかと想像します。
（そちらの方が、多分、簡単で綺麗に表示できるかも）

斜め読みしている際に、Visualization API に hideRows() メソッドがあるのを見つけました。
これが利用できるのではないかと想像しますが、読み解いてはいません。
https://developers.google.com/chart/interactive/ …

ご参考までに、図２の表示の際のスクリプト部分を以下に載せておきます。
<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>

- 1
- 件

通報する

この回答へのお礼

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>