我们将 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>
)?
最佳答案
您可以检查窗口宽度,然后返回正确的值。
var wWidth = $(window).width(),
value;
if(wWidth < 400) {
value = 5;
} else {
value = 10;
}
//范围
y: value
关于css - 在浏览器调整大小时更改 legend.y 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33913810/