Google 어시스턴트 차트 시각화에서 박스를 수직 정렬하려면

Question

나는 google org chart visualization API을 사용하고 있으며 셀에 수직 정렬을 설정하고 싶습니다. (나는 각 조직도 상자에 여러 사람을 보여주기 때문에 모든 "수준"을 가운데 대신에 정렬하고 싶습니다. 예를 들어, 어디에 있습니까 앨리스은 세로 가운데에 있습니다. 나는 valign = . 할 수있는 간단한 방법이 있는지 잘 모르겠어요

// for 0 row 0 column 
data.setProperty(0, 0, "style", "valign:top;"); 

Answer 1

아래처럼 상단 : 당신은 수직 정렬을 사용해야합니다. 다음은 내가 한 일입니다 ...

내 실수는 처음에 Google 자바 스크립트 코드 위에 CSS 블록을 추가하는 것이 었습니다. 일단 그것을 옮기면 시각적 속성을 거의 바꿀 수 있습니다. 간단한 오픈 소스 자바 스크립트 조직도 라이브러리를 찾는 분들을 위해

<script type='text/javascript'> 
     google.load('visualization', '1', {packages:['orgchart']}); 
     google.setOnLoadCallback(drawChart); 
     function drawChart() { 

     /*GOOGLE MUMBO JUMBO GOES HERE*/ 

     var chart = new google.visualization.OrgChart(document.getElementById('chart_div')); 
     chart.draw(data, {allowHtml:true}); 
     } 
</script> 
<style type="text/css"> 
    .google-visualization-orgchart-node { 
     width: 240px; 
    } 
    .google-visualization-orgchart-node-medium { 
     vertical-align: top; 
    } 
</style> 

Answer 2

를 사용하여 수행이 가능하다 Google API를 사용하면 간단하지만 CSS로이를 달성 할 수 있습니다.

대신

['Alice', 'Mike', ''], 

당신은 당신이 원하는 경우, 당신은 또한 해당 셀의 높이를 계산하고 해당 셀의 div 태그에 할당하기 위해 자바 스크립트 코드를 작성할 수 있습니다

['<div style="height:50px;vertical-align:top">Alice</div>', 'Mike', ''], 

를 작성할 수 있습니다.

편집 : TD 요소를 세로로 정렬하려면 사용자 지정 CSS를 쓸 수 있습니다.

.google-visualization-orgchart-node {vertical-align:top;} 

Answer 3

: "최고"당신은 setProperty 기능을 가진 세포로 CSS를 조정할 수 있습니다 구글 시각화 API ??

Answer 4

Elzo에는 제안이 있지만 대신 valign : top; 당신은 조직도 내의 요소 스타일을 지정할 수 있습니다 data.setProperty(0, 0, "style", "vertical-align:top;");

Answer 5

: 난 그냥 lib_gg_orgchart을 발표했습니다

. JSON 입력을 사용하고 Raphael을 사용하여 차트를 그립니다.

몇 가지 예제 및 다운로드 사이트에서보세요 : 당신이 유용한 경우

http://www.fluxus.com.ve/gorka/lib_gg_orgchart

알려 주시기 바랍니다.