我的问题是如何将图表置于特定节点的中心位置?
因为它非常大并且在一个较小的div中,只是切成两半而我用来显示一个人在组织结构中的位置...所以如果位置在切割部分我需要移动图表,但我只需要在位置的节点中水平居中......
我尝试了很多东西而且没有给我任何结果
使用Javascript / JQuery的
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
data.addRows([
['a','',''],
['b','a',''],
['c','a',''],
['d','a',''],
['e','a',''],
['o','a',''],
['f','b',''],
['g','b',''],
['h','c',''],
['i','c',''],
['j','d',''],
['k','d',''],
['l','e',''],
['m','e',''],
['o','p',''],
['o','q',''],
]);
var chart = new google.visualization.OrgChart(document.getElementById('draggable'));
chart.draw(data, {allowHtml:true});
var selectedArray = new Array();
var counter = 0;
var commaSeperatedDefaultValues = "e";
var defaultValuesArray = commaSeperatedDefaultValues.split(",");
var z = 16;
for(i=0; i < z ;i++) {
chart.setSelection([{row: i}]);
var temp = chart.getSelection()[0];
var a = defaultValuesArray.indexOf(data.getValue(temp.row, 0));
if(a != -1)
selectedArray[counter++] = temp;
}
chart.setSelection(selectedArray);
}
$(function() {
$("#draggable").draggable({
cursor:'move',
axis: "x",
drag:function(e, ui){
if(ui.offset.left > $("#container").offset().left)
return false; if(ui.offset.left + ui.helper.width() <= $("#container").offset().left + $("#container").width())
return false;
}
});
});
HTML
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['orgchart']}]}"></script>
<div id="container" style="cursor: w-resize">
<div id="draggable" style="display: table;"></div>
</div>
CSS
#container {
width: 200px;
border: 1px solid #000000;
}
相关JSFiddle