4

我的问题是使用 google orgchart。

我的问题是如何将图表放在特定节点的中心？

因为它非常大并且在一个较小的 div 中，所以只需将其切成两半，我用来显示一个人在 orgchart 中的位置......所以如果位置在剪切部分中，我需要移动图表，但我只是需要在该位置的节点中水平居中...

我尝试了很多事情，但没有任何结果

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

4

0 回答 0