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

Question

我们将 highchart 控件与 Angular 和 bootstrap 一起使用。要调整图表和图例之间的垂直空间(两者都由 highchart 呈现为 svg 元素)，我们设置 y legend 的属性(property)在页面加载时(在 controller 中)像这样:

$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