javascript – Highcharts：图表不会通过缩小屏幕来正确调整大小

我正在使用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

原文地址：https://www.jb51.cc/js/159505.html