Highcharts:通过缩小屏幕,图表无法正确调整大小

Question

我正在使用HighCharts 4.0.4,我有一个带有自定义图例的图表:

<div class="wrapper">
    <div class="element">
        <div id="chart"></div>
    </div>
    <div class="legend">
        Legend
    </div>
</div>

在CSS这个样子的.该wrapper是一个表,让我能与传奇使用table-cell一个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%;
}

问题是,我在这里创建了一个JSFiddle ,如果输出/结果窗口很小,"运行"代码,我看到50%:50%.调整输出窗口的大小并使其变大,一切正常,50%:50%可以,但是使输出窗口变小,图表不能正确调整大小.

我看到了一些解决方案$(window).resize();.在我的情况下,我尝试使用outerHeight,但只有当我使屏幕尺寸更大时,值才会改变.所以我发现这个解决方案有效:

$('#chart').highcharts().setSize(
  $(".wrapper").width() / 2, $('#chart').highcharts().height, doAnimation = true
);

但是还有一个解决方案,不需要使用JavaScript,只需要HTML和CSS吗？

Answer 1

这应该只使用CSS ...没有调整大小的功能.

尝试添加position:absolute到您的图表css属性

新的CSS的#chart应该是这样的:

#chart {
    display: table-cell;
    position:absolute;
    width:50%;
}

我想这就是你想要的效果.

检查我的小提琴

注意:我删除了所有调整大小的Javascript

跟进:

如果需要在动画窗口调整大小时调整Highcharts的大小,可以使用此语法执行此操作.

$(window).resize(function() {
    height = $(window).height()
    width = $(window).width() / 2
    $("#chart").highcharts().setSize(width, height, doAnimation = true);
});

我想,这是你想要使用Highchart更多什么setSize方法动画,而不是CSS)

小提琴

Answer 2

svg 图像可以防止图像table-cell变小。解决这个问题的方法是：

.highcharts-container, .highcharts-container svg {
     width: 100% !important;
}

请参阅示例http://jsfiddle.net/FzXEM/9/

还有其他方法可以使图表正确调整大小，例如使用float: left或position: absolute，但还有其他问题，您只能vertical-align在表格或内联布局中使用。