JS Plotly奇缘顶部

Question

我正在使用 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); }; } } }); 制作我的图表。但是我的水平条形图在顶部有一些奇数填充/边距：

谁能告诉我如何解决这个问题？

CODE

let params = { width:1680, height:1050 };
// convert object to list -- to enable .map
let data = Object.entries(params);
// encode every parameter (unpack list into 2 variables)
data = data.map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`);
// combine into string
let query = data.join('&');
console.log(query); // => width=1680&height=1050

Answer 1

我没有角度经验，但我认为你应该将margin-top值设置为0。 正如您在引用（https://plot.ly/javascript/reference/#layout-margin）中看到的那样，layout.margin.t的默认值为80.因此将代码更改为：

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

顺便说一句：也许现在每个情节图顶部的模式栏按钮都不再可见了。为此，您可以尝试t:30或其他值。 希望它有所帮助： - ）