我正在使用 HighCharts 4.0.4,并且我有一个带有自定义图例的图表,如下所示:
<div class="wrapper">
<div class="element">
<div id="chart"></div>
</div>
<div class="legend">
Legend
</div>
</div>
The CSS
看起来像这样。这wrapper
是一个表格,这样我就可以在图例中使用table-cell
a vertical-align: middle
。我想同时拥有 50% 的宽度wrapper
.
.wrapper {
display: table;
width: 100%;
}
.element {
display: table-cell;
width: 50%;
}
.legend {
display: table-cell;
width: 50%;
vertical-align: middle;
}
#chart {
width: 100%;
}
问题是,我创建了一个 JSFiddlehere http://jsfiddle.net/L9gubqvy/3/,如果输出/结果窗口很小,“运行”代码,我会看到 50%:50%。调整输出窗口大小并使其变大,一切都好,50%:50% 没问题,但是使输出窗口变小,图表无法正确调整大小。
我看到了一些解决方案$(window).resize();
。就我而言,我尝试使用outerHeight
,但只有当我增大屏幕尺寸时,这些值才会改变。所以我发现这个解决方案有效:
$('#chart').highcharts().setSize(
$(".wrapper").width() / 2, $('#chart').highcharts().height, doAnimation = true
);
但是否还有一种不需要使用 JavaScript,只需要使用 HTML 和 CSS 的解决方案呢?
这应该只需完成CSS...没有调整大小功能。
尝试添加position:absolute
到你的图表 CSS 属性
The new css for #chart
看起来像这样:
#chart {
display: table-cell;
position:absolute;
width:50%;
}
我想这就是你想要的效果。
检查我的小提琴 http://jsfiddle.net/dalper01/0xmf9h6d
note:我删除了所有调整大小的内容JavaScript
跟进:
如果您需要在使用动画调整窗口大小时调整 Highcharts 的大小,可以使用此语法来完成。
$(window).resize(function() {
height = $(window).height()
width = $(window).width() / 2
$("#chart").highcharts().setSize(width, height, doAnimation = true);
});
我认为这更符合您使用 Highchart 的需求setSize
用动画代替的方法CSS)
Fiddle http://jsfiddle.net/5vmvkahc
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)