Plotly 图表区域截断文本

Question

我有以下情节代码：

            var element = document.getElementById(scope.changeid);

        function getData(division,redraw) {
            var employeeData = [];
            if (!division) {
                $http.get(api.getUrl('competenceUserAverageByMyDivisions', null)).success(function (response) {
                    processData(response,redraw);
                });
            }
            else {
                $http.get(api.getUrl('competenceUserAverageByDivision', division)).success(function (response) {
                    processData(response,redraw);
                })
            }

        }

        function processData(data,redraw) {
            var y = [],
                x1 = [],
                x2 = [];

            data.forEach(function (item) {
                y.push(item.user.profile.firstname);
                x1.push(item.current_level);
                x2.push(item.expected);
            });

            var charData = [{
                    x: y,
                    y: x1,
                    type: 'bar',

                    name: $filter('translate')('COMPETENCES.GRAPH.CURRENT'),
                    marker: {
                        color: '#23b7e5'
                    }
                }, {
                    x:y,
                    y:x2,
                    type: 'bar',
                    marker: {
                        color: '#f05050'
                    },
                    name: $filter('translate')('COMPETENCES.GRAPH.EXPECTED')
                }],
                layout = {
                    title: $filter('translate')('USERMANAGEMENT.USERS'),
                    barmode: 'stack',
                    legend: {
                        traceorder: 'reversed'

                    }
                };

            Plotly.newPlot(element,charData,layout);
        }

        scope.$watch('divisionId', function (newValue, oldValue) {
            if (newValue) {
                getData(newValue.id,true);
            }
        }, true);

        getData(null,false);

这会生成以下图表：

                            <div class="panel-body">
                            <h4 class="text-center">{{'COMPETENCES.GRAPH_TITLES.OVERVIEW_GAP' | translate}}</h4>
                            <vertical-bar-chart id="chartArea" goto="competence.titleCompetenceDetails"
                                                changeid="chartArea" xcolumn="xColumn" y-column="yColumn"
                                                dataset="dataSet"
                                                has-addition="true"
                                                style="width: 80%; text-align: center"></vertical-bar-chart>
                        </div>

您可能会说文本（x 列）被无意中截断了。所以我的问题是我怎样才能避免这种情况？我试图增加元素的高度但是没有任何运气:(

如您所见：

（哦，因为白色背景你看不出来，但是面板主体的高度是 1000 px，但是它仍然把它剪掉了。）

Answer 1

尝试在 layout.margin.b 中增加底部边距（更多信息在 plotlyjs reference page。

Answer 2

作为参考，我遇到了同样的问题，底部边距没有帮助，但是在创建图表后，我运行下面的 JQuery 显示了隐藏的文本：

var heightincrease = $('#yourID').find('.svg-container').height() + 100;
$('#yourID').find('.svg-container').height(heightincrease).find('.main-svg').height(heightincrease);

显然根据需要进行调整以显示整个图表。调整大小可能会中断，因此如果担心的话需要工作。

Plotly 图表区域截断文本

Plotly chart area cuts off text

charts

plotly