我正在使用HighCharts 4.0.4,我有一个带有自定义图例的图表：
<div class="wrapper">
<div class="element">
<div id="chart"></div>
</div>
<div class="legend">
Legend
</div>
</div>
CSS看起来像这样.包装器是一个表,因此我可以在图例中使用table-cell一个vertical-align：middle.我希望两者都有50％的包装宽度.
.wrapper {
display: table;
width: 100%;
}
.element {
display: table-cell;
width: 50%;
}
.legend {
display: table-cell;
width: 50%;
vertical-align: middle;
}
#chart {
width: 100%;
}
问题是,我创建了一个JSfiddle here,如果输出/结果窗口很小,“运行”代码,我看到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属性中
#chart的新css如下所示：
#chart {
display: table-cell;
position:absolute;
width:50%;
}
我想这就是你想要的效果.
Check my Fiddle
注意：我删除了所有调整大小的Javascript
跟进：
如果需要在动画窗口调整大小时调整Highcharts的大小,可以使用此语法执行此操作.
$(window).resize(function() {
height = $(window).height()
width = $(window).width() / 2
$("#chart").highcharts().setSize(width,height,doAnimation = true);
});
我认为这更像你想要使用Highchart setSize方法和动画而不是CSS
Fiddle