在浏览器调整大小时更改legend.y属性

Question

我们使用Angular和bootstrap的高图控件。 要调整图表和图例之间的垂直空间（两者都由高图作为svg元素呈现），我们在页面加载时设置y的{​​{1}}属性（在legend中）像这样：

controller

现在在其中一个Bootstraps布局中，间距（y）应该是$scope.chartContracts = { options: { chart: { type: 'pie', marginBottom: 50 }, legend : { layout: 'horizontal', align: 'center', verticalAlign: 'bottom', x: 0, y: 4, 而不是-10，因为由于某种原因会增加额外的间距。

所以它应该基于媒体查询或类似的猜测吗？

问题是如何做到这一点...我尝试用css但我似乎无法设置SVG元素的样式（它们被称为4）？

Answer 1

您可以检查窗口宽度，然后返回正确的值。

var wWidth = $(window).width(),
    value;

if(wWidth < 400) {
   value = 5;
} else {
   value = 10;
}

//范围

y: value