简体   繁体   中英

Google chart huge organization diagram leaving screen

So i have the following directive:

angular.module('Division').directive('divisionChart', function (divisionListService) {
    return {
        restrict: 'E',
        templateUrl: 'js/helpers/Division/directives/division-chart/division-chart.html',
        replace: true,
        link: function (scope, element, attr) {
            function createChart() {
                divisionListService.getList().then(function (result) {
                    var rows = [];
                    result.forEach(function (x) {
                        rows.push({
                            "c": [
                                {"v": x.id, "f": x.name},
                                {"v": x.parent_id >= 0 ? x.parent_id : ''}
                            ]
                        })
                    });
                    var data = {
                        "cols": [
                            {"label": "Name", "pattern": "", "type": "string"},
                            {"label": "Manager", "pattern": "", "type": "string"},
                            {"label": "ToolTip", "pattern": "", "type": "string"}
                        ],
                        "rows": rows
                    };
                    scope.chartObject = {
                        type: "OrgChart",
                        data: data
                    };
                });
            }

            // Instantiate and draw our chart, passing in some options.
            jQuery(document).ready(function () {
                createChart();
            });
        }
    }
});

And the following html:

<div class="col-xs-12">
    <div id="chart_div" google-chart chart="chartObject"></div>
</div>

The data generated can be fairly large when dealing with greater organizations.

Which makes my diagram leave the screen like the image below shows: 在此输入图像描述

I have tried fixing the issue by setting the width:100% however it does not seem to do anything.

So my question is how can fix this issue?

Google chart does not support it.

I would suggest you to use getorgchart instead

在此输入图像描述

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM