Javascript JS Plotly奇数页边距顶部

我正在使用

PlotlyJS

制作图表。但是，我的水平条形图顶部有一些奇怪的填充/边距：

谁能告诉我怎么解决这个问题吗

代码

    angular.module('Chart').directive('advancedChart', function (seriesGenerator) {
    return {
        restrict: 'E',
        template: '<div> </div>',
        scope: {
            chartData: '=',
            valueKey: '@',
            labelKey: '@',
            orientation: '@',
            seriesType: '@',
            shapes: '=',
            customSeries: '=',
            seriesKey: '@',
            labelFilter: '@',
            labelGroup: '@',
            callback: '=',
            customSize: '='
        },
        replace: true,
        link: function (scope, element, attr) {
            var plotElement = element[0];
            var myPlot = document.getElementById('uniqueId');
            var layout = {};

            if (scope.customSize) {
                var height = scope.chartData.length * 50;
                layout = {
                    height: height
                }
            }

            if (!scope.orientation) {
                scope.orientation = 'v';
            }

            if (!scope.seriesKey) {
                scope.seriesKey = scope.labelKey;
            }

            seriesGenerator.generateAdvancedPlotlySeries(scope.chartData, scope.labelKey, scope.valueKey, scope.seriesType, scope.orientation, scope.seriesKey, scope.labelFilter, scope.labelGroup)
                .then(function (result) {
                    if (scope.shapes) {
                        layout.shapes = scope.shapes;
                    }
                    layout.margin = {
                        l:250,
                    };
                    layout.showlegend = false;

                    if (scope.customSeries) {
                        result = result.concat(scope.customSeries);
                    }

                    createChart(result);
                });

            function createChart(charData) {
                Plotly.newPlot(plotElement, charData, layout);

                plotElement.on('plotly_click', function (data) {
                    if (scope.callback != null) {
                        var returnData = {
                            y: data.points[0].y,
                            x: data.points[0].x
                        };
                        scope.callback(returnData);
                    }
                    console.log('y: ' + data.points[0].y + ' ' + 'x:' + data.points[0].x);
                });
            }

            window.onresize = function () {
                var update = {
                    width: element.parent().width();
                };
                Plotly.relayout(plotElement, update);
            };
        }
    }
});

angular.module（'Chart'）。指令（'advancedChart'，函数（seriesGenerator）{
返回{
限制：'E'，
模板：“”，
范围：{
图表数据：'='，
valueKey:“@”，
labelKey:“@”，
方向：“@”，
序列类型：“@”，
形状：“=”，
customSeries:“=”，
序列号：“@”，
labelFilter:“@”，
标签组：“@”，
回调：'='，
自定义大小：'='
},
替换：正确，
链接：功能（范围、元素、属性）{
变量plotElement=元素[0]；
var myPlot=document.getElementById（'uniqueId'）；
var布局={}；
if（范围自定义大小）{
变量高度=scope.chartData.length*50；
布局={
高度：高度
}
}
如果（！scope.orientation）{
scope.orientation='v'；
}
如果（！scope.seriesKey）{
scope.seriesKey=scope.labelKey；
}
seriesGenerator.GeneratedVancedPlotlySeries（scope.chartData、scope.labelKey、scope.valueKey、scope.seriesType、scope.orientation、scope.seriesKey、scope.labelFilter、scope.labelGroup）
.然后（函数（结果）{
if（作用域形状）{
layout.shapes=scope.shapes；
}
layout.margin={
l:250，
};
layout.showlegend=false；
if（scope.customSeries）{
结果=result.concat（scope.customSeries）；
}
创建图表（结果）；
});
函数createChart（charData）{
Plotly.newPlot（plotElement、charData、layout）；
plotElement.on（'plotly_click'，函数（数据）{
if（scope.callback！=null）{
var returnData={
y:数据点[0].y，
x:数据点[0].x
};
回调（returnData）；
}
console.log（'y:'+data.points[0].y+'+'x:'+data.points[0].x）；
});
}
window.onresize=函数（）{
变量更新={
宽度：element.parent（）.width（）；
};
Plotly.relayout（plotElement，update）；
};
}
}
});

我没有使用angular的经验，但我认为应该将边距上限值设置为0。 正如您在参考（）中看到的，layout.margin.t的默认值是80。因此，请将代码更改为：

layout.margin = {
    l:250,
    t:0
};

顺便说一句：也许现在每个plotly图形顶部的modebar按钮不再可见了。为此，您可以尝试

t:30

或其他值。

---

希望有帮助：-）

没有任何代码就无法帮助您，您不同意吗？@GerardoFurtado il为我的问题添加代码