javascript - 谷歌图表巨大的组织图离开屏幕

Question

所以我有以下指令:

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();
            });
        }
    }
});

以及以下 html:

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

与较大的组织打交道时，生成的数据可能相当大。

这使得我的图表离开屏幕，如下图所示:

我尝试通过设置 width:100% 来解决该问题，但它似乎没有做任何事情。

所以我的问题是如何解决这个问题？

Answer 1

Google 图表不支持。

我建议您使用getorgchart相反