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

Question

我们使用带有 Angular 和引导程序的 highchart 控件。 为了调整图表和图例之间的垂直间距（两者都由 highchart 呈现为 svg 元素），我们在页面加载时（在 controller 中）设置 y 属性，如下所示：

$scope.chartContracts = {
    options: {
        chart: {
            type: 'pie',
            marginBottom: 50
        },
        legend : {
            layout: 'horizontal',
            align: 'center',
            verticalAlign: 'bottom',
            x: 0,
            y: 4,

现在在其中一个 Bootstraps 布局中，间距 (y) 应该是 -10 而不是 4，因为由于某种原因添加了额外的间距。

所以我猜它应该基于媒体查询或类似的东西？

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

Answer 1

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

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

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

//范围

y: value